/* Thème via attributs sur */
:root {
--bg: #f3f4f6; /* gris clair */
--card: #ffffff;
--text: #111827; /* écriture très lisible */
--muted: #4b5563;
--border: rgba(17, 24, 39, 0.14);
--primary: #2563eb; /* bleu */
--primary-ink: #ffffff;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--focus: rgba(37, 99, 235, 0.35);
--radius: 14px;
--gap: 14px;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
html[data-theme="dark"] {
--bg: #0f172a; /* gris foncé */
--card: #111c35;
--text: #e5e7eb; /* écriture très lisible */
--muted: #a1a1aa;
--border: rgba(229, 231, 235, 0.16);
--primary: #60a5fa; /* bleu plus clair en dark */
--primary-ink: #07121f;
--shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
--focus: rgba(96, 165, 250, 0.35);
}
* { box-sizing: border-box; }
html, body {
height: 100%;
}
body {
margin: 0;
font-family: var(--sans);
background: var(--bg);
color: var(--text);
}
.container {
width: min(980px, calc(100% - 32px));
margin: 0 auto;
}
.header {
display: flex;
gap: 18px;
align-items: flex-end;
justify-content: space-between;
padding: 22px 0 14px;
}
.logo{
width: 70px;
height: auto;
border-radius: 90px;
display: grid;
place-items: center;
display: block;
}
.theme {
display: grid;
gap: 8px;
justify-items: end;
}
.label {
font-size: 12px;
color: var(--muted);
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
}
.card-title {
margin: 0 0 14px;
font-size: 16px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap);
}
.field.span2 {
grid-column: 1 / -1;
}
.actions.span2 {
grid-column: 1 / -1;
display: flex;
gap: 12px;
justify-content: flex-end;
align-items: center;
}
.field .hint {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 12px;
}
.input, .select {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
outline: none;
font-size: 14px;
}
.input {
font-family: var(--mono); /* écriture visible et conventionnelle */
}
.select {
font-family: var(--sans);
appearance: none;
}
.input:focus, .select:focus {
border-color: rgba(37, 99, 235, 0.55);
box-shadow: 0 0 0 4px var(--focus);
}
.checkboxRow {
display: flex;
gap: 10px;
align-items: center;
user-select: none;
}
.checkboxRow input {
width: 18px;
height: 18px;
}
.tvaRow {
display: grid;
grid-template-columns: 1fr 160px;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.btn {
border: 1px solid transparent;
background: var(--primary);
color: var(--primary-ink);
padding: 10px 14px;
border-radius: 12px;
cursor: pointer;
font-weight: 700;
}
.btn-secondary {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 4px var(--focus);
}
.results {
display: grid;
gap: 10px;
}
.resultRow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.k {
color: var(--muted);
font-size: 13px;
}
.v {
font-family: var(--mono);
font-size: 16px;
text-align: right;
}
.resultRow.total .v {
font-size: 20px;
font-weight: 800;
}
.divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.detail {
max-width: 62ch;
color: var(--text);
font-size: 13px;
line-height: 1.3;
white-space: pre-wrap;
}
.micro {
margin-top: 12px;
color: var(--muted);
font-size: 12px;
}
.footer {
padding: 22px 0 30px;
color: var(--muted);
font-size: 12px;
display: flex;
justify-content: center;
}
/* Mobile: une colonne */
@media (max-width: 720px) {
.header {
flex-direction: column;
align-items: flex-start;
}
.theme {
width: 100%;
justify-items: start;
}
.grid {
grid-template-columns: 1fr;
}
.field.span2, .actions.span2 {
grid-column: auto;
}
.tvaRow {
grid-template-columns: 1fr;
}
}