/* Thème commun. Convention d'unités : docs/css.md (rem, jamais em). Thème : attribut data-theme sur , posé par js/theme.js. */ :root { --bg: #f4f6fb; --surface: #ffffff; --text: #16203a; --muted: #5a6480; --border: #dce1ec; --accent: #2544b8; --accent-text: #ffffff; --brand-warm: #e8912a; --ok: #1c8a4e; --warn: #b0660a; --error: #c62f2d; --tint: 13%; --shadow: 0 1px 2px rgb(22 32 58 / 6%), 0 4px 14px rgb(22 32 58 / 6%); /* Couleurs des propositions (repère secondaire : la forme reste le repère principal). */ --opt-0: #d9413f; --opt-1: #2f68d8; --opt-2: #c99700; --opt-3: #25935a; --opt-4: #8350d6; --opt-5: #d86f22; --radius: 0.75rem; color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } :root[data-theme="dark"] { --bg: #0e1321; --surface: #171f33; --text: #e7eaf3; --muted: #98a2bc; --border: #29334e; --accent: #7e9bff; --accent-text: #0a1020; --brand-warm: #f2a54a; --ok: #4cc485; --warn: #e9a84d; --error: #ff7471; --tint: 22%; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 25%); --opt-0: #ff6b69; --opt-1: #6f9bff; --opt-2: #f2c63d; --opt-3: #4cc485; --opt-4: #b08cff; --opt-5: #ff9d57; color-scheme: dark; } * { box-sizing: border-box; } /* L'attribut hidden doit l'emporter sur les display des composants (.row, button…). */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; } main { max-width: 60rem; margin: 0 auto; padding: 1rem; } h1, h2, h3 { line-height: 1.2; } .card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; } button, .button { font: inherit; padding: 0.625rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; } button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } button:disabled { opacity: 0.5; cursor: not-allowed; } input, textarea { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.625rem; } textarea { width: 100%; min-height: 17.5rem; font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 0.9rem; } .muted { color: var(--muted); } .error { color: var(--error); } .ok { color: var(--ok); } .row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .spacer { flex: 1; } pre[class*="language-"], code[class*="language-"] { font-size: 0.9rem; } pre { overflow-x: auto; border-radius: var(--radius); } button:hover:not(:disabled), .button:hover { border-color: var(--accent); } button.primary:hover:not(:disabled) { filter: brightness(1.08); } /* Focus visible au clavier uniquement. */ :focus-visible { outline: 3px solid var(--brand-warm); outline-offset: 2px; } /* Logo et en-tête */ .logo { font-weight: 800; letter-spacing: -0.02rem; } .logo-shapes { font-size: 0.8rem; letter-spacing: 0.1rem; vertical-align: middle; } .logo-shapes { background: linear-gradient(90deg, var(--opt-0), var(--opt-1), var(--opt-2), var(--opt-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } h1 .subtitle { font-weight: 500; font-size: 1.2rem; } .theme-toggle { padding: 0.4rem 0.7rem; font-size: 1.1rem; line-height: 1; } .theme-toggle.corner { position: fixed; top: 0.75rem; right: 0.75rem; opacity: 0.35; z-index: 10; } .theme-toggle.corner:hover, .theme-toggle.corner:focus-visible { opacity: 1; } /* Formulaires simples */ .narrow { max-width: 28rem; } .stack { display: grid; gap: 0.9rem; } .stack label { display: grid; gap: 0.3rem; } /* Animations légères, coupées si l'appareil le demande. */ @keyframes appear { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } } [data-section]:not([hidden]) { animation: appear 0.25s ease-out; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }