/* Thème : clair par défaut + support system/dark via attribut data-theme sur */ :root { --bg: #f3f4f6; --panel: #ffffff; --panel2: #f7f7fb; --text: #111827; --muted: #4b5563; --border: rgba(17, 24, 39, 0.12); --primary: #4b5563; /* gris */ --primary2: #6b7280; --shadow: 0 10px 25px rgba(17, 24, 39, 0.08); --focus: rgba(75, 85, 99, 0.35); --danger: #b91c1c; --dangerBg: rgba(185, 28, 28, 0.08); } html[data-theme="dark"] { --bg: #0b1220; --panel: #111a2e; --panel2: #0f172a; --text: #e5e7eb; --muted: #a1a1aa; --border: rgba(229, 231, 235, 0.12); --primary: #a1a1aa; --primary2: #cbd5e1; --shadow: 0 18px 40px rgba(0, 0, 0, 0.35); --focus: rgba(203, 213, 225, 0.35); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: var(--bg); color: var(--text); } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(8px); } .logo{ width: 70px; height: auto; border-radius: 90px; display: grid; place-items: center; display: block; } .theme { display: flex; align-items: center; gap: 10px; } .theme__label { color: var(--muted); font-size: 0.95rem; } .theme__select { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 10px 12px; border-radius: 12px; outline: none; } .theme__select:focus-visible { box-shadow: 0 0 0 4px var(--focus); } .container { max-width: 980px; margin: 0 auto; padding: 18px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; } .card--secondary { background: var(--panel2); } .card__title { margin: 0 0 14px 0; font-size: 1.2rem; letter-spacing: -0.02em; } .card__title--small { font-size: 1.05rem; } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .field { grid-column: span 4; display: flex; flex-direction: column; gap: 8px; } .field--compact { grid-column: span 4; max-width: 420px; } label { color: var(--muted); font-size: 0.95rem; } input, select { width: 100%; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 12px 12px; border-radius: 12px; outline: none; font-size: 1rem; } input:focus-visible, select:focus-visible { box-shadow: 0 0 0 4px var(--focus); } .hint { color: var(--muted); font-size: 0.86rem; line-height: 1.25; } .actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: 4px; } .btn { border: 1px solid var(--border); background: linear-gradient(180deg, var(--primary2), var(--primary)); color: #fff; padding: 12px 14px; border-radius: 12px; font-weight: 700; cursor: pointer; } .btn:hover { filter: brightness(1.02); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); } .btn--ghost { background: transparent; color: var(--text); } .results { margin-top: 16px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .result { grid-column: span 6; border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: color-mix(in oklab, var(--panel) 70%, transparent); } .result--wide { grid-column: span 12; } .result__label { color: var(--muted); font-size: 0.95rem; } .result__value { margin-top: 8px; font-weight: 900; letter-spacing: -0.03em; font-size: 1.85rem; } .result__value--small { font-size: 0.98rem; font-weight: 700; word-break: break-word; } .result__meta { margin-top: 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.35; } .list { margin: 0; padding-left: 18px; color: var(--text); } .list li { margin: 10px 0; color: var(--muted); } .list strong { color: var(--text); } .footer { padding: 8px 2px 26px; } .muted { color: var(--muted); font-size: 0.95rem; } /* Responsive */ @media (max-width: 860px) { .field { grid-column: span 12; } .result { grid-column: span 12; } }