/* Conventions: variables + thèmes via data-theme sur */ :root{ --bg: #f4f4f6; --card: #ffffffcc; --text: #111217; --muted: #4b4f5c; --border: rgba(16,18,23,.12); --shadow: 0 10px 30px rgba(16,18,23,.08); --primary: #3f3f46; --primaryText: #ffffff; --focus: #2563eb; --inputBg: #ffffff; --inputText: #111217; --inputBorder: rgba(16,18,23,.16); --btnGhost: rgba(16,18,23,.06); --btnGhostHover: rgba(16,18,23,.10); --codeBg: rgba(16,18,23,.06); --radius: 14px; --gap: 14px; color-scheme: light; } html[data-theme="dark"]{ --bg: #0f1115; --card: rgba(22,25,33,.78); --text: #f3f4f6; --muted: #b6bac6; --border: rgba(255,255,255,.12); --shadow: 0 18px 50px rgba(0,0,0,.35); --primary: #a3a3a3; --primaryText: #0f1115; --focus: #60a5fa; --inputBg: rgba(16,18,23,.55); --inputText: #f3f4f6; --inputBorder: rgba(255,255,255,.18); --btnGhost: rgba(255,255,255,.08); --btnGhostHover: rgba(255,255,255,.12); --codeBg: rgba(255,255,255,.08); color-scheme: dark; } *{ box-sizing: border-box; } body{ margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; background: var(--bg); color: var(--text); line-height: 1.4; } .skip-link{ position: absolute; left: -999px; top: 10px; background: var(--primary); color: var(--primaryText); padding: 10px 12px; border-radius: 10px; z-index: 10; } .skip-link:focus{ left: 10px; outline: 3px solid var(--focus); } .topbar{ max-width: 980px; margin: 28px auto 0; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo{ width: 70px; height: auto; border-radius: 90px; display: grid; place-items: center; display: block; } .title{ margin: 0; font-size: 1.05rem; letter-spacing: .2px; } .subtitle{ margin: 2px 0 0; color: var(--muted); font-size: .95rem; } .container{ max-width: 980px; margin: 18px auto 34px; padding: 0 16px; } .card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .card + .card{ margin-top: 16px; } .form{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 820px){ .form{ grid-template-columns: 1fr; } .topbar{ flex-direction: column; align-items: flex-start; } } .field{ display: flex; flex-direction: column; gap: 8px; } .field label{ font-weight: 700; } .help{ margin: 0; color: var(--muted); font-size: .92rem; } input, select, button{ font: inherit; } input[type="number"], select{ background: var(--inputBg); color: var(--inputText); border: 1px solid var(--inputBorder); border-radius: 12px; padding: 11px 12px; outline: none; } input[type="number"]:focus, select:focus, .theme-btn:focus, button:focus{ outline: 3px solid color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 2px; } .actions{ grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .primary, .ghost, .ex, .theme-btn{ border-radius: 12px; border: 1px solid transparent; padding: 11px 14px; cursor: pointer; user-select: none; } .primary{ background: var(--primary); color: var(--primaryText); font-weight: 800; } .primary:hover{ filter: brightness(1.03); } .ghost{ background: var(--btnGhost); color: var(--text); border-color: var(--border); } .ghost:hover{ background: var(--btnGhostHover); } .theme{ display: flex; align-items: center; gap: 12px; } .theme-btn{ background: var(--btnGhost); border-color: var(--border); color: var(--text); display: inline-flex; align-items: center; gap: 10px; } .theme-icon{ width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--inputBg) 45%, transparent); } .theme-hint{ min-height: 1.1em; color: var(--muted); font-size: .92rem; } .result{ grid-column: 1 / -1; margin-top: 2px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--inputBg) 35%, transparent); } .result-line{ display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .result-label{ font-weight: 800; } .result-value{ font-weight: 900; font-size: 1.25rem; } .result-details{ margin-top: 8px; color: var(--muted); } .extras{ grid-column: 1 / -1; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 12px; } .extras h3{ margin: 0; font-size: 1rem; } .toggle-row{ display: flex; gap: 14px; flex-wrap: wrap; } .checkbox{ display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--inputBg) 40%, transparent); border: 1px solid var(--border); padding: 10px 12px; border-radius: 12px; } .checkbox input{ width: 18px; height: 18px; } .field-inline{ display: flex; align-items: center; gap: 10px; } .field-inline label{ font-weight: 800; } .tip ul{ margin: 12px 0 0; padding-left: 18px; } .ex{ padding: 9px 12px; } .footer{ max-width: 980px; margin: 0 auto 28px; padding: 0 16px; color: var(--muted); font-size: .95rem; } /* Accessibilité: si le navigateur ne sait pas gérer color-mix, on garde de bons contrastes via variables */