css
/* sys_data_model — page « Modèle de données ». Tout est confiné sous .sdm-page. */ .sdm-page { --sdm-accent: var(--primary, #2f6fed); --sdm-accent-soft: #eef3ff; --sdm-edge: #e3e8ef; --sdm-background: #fff; --sdm-background-page: #f6f8fb; --sdm-ink: #1f2933; --sdm-soft: #66768a; --sdm-ok: #1e7e34; --sdm-ok-soft: #e8f5ec; --sdm-pending: #9a6700; --sdm-pending-soft: #fff6e0; --sdm-nothing: #66768a; --sdm-nothing-soft: #f0f3f6; --sdm-alert: #b42318; --sdm-alert-soft: #fdeceb; --sdm-radius: 10px; --sdm-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06); --sdm-shadow-high: 0 12px 32px rgba(16, 24, 40, .18); --sdm-mono: SFMono-Regular, Consolas, "Liberation Mono", monospace; max-width: 1320px; color: var(--sdm-ink); font-size: 14px; } @supports (background: color-mix(in srgb, red 10%, white)) { .sdm-page { --sdm-accent-soft: color-mix(in srgb, var(--sdm-accent) 9%, white); } } /* ── Icônes ─────────────────────────────────────────────────────────────── */ .sdm-page .sdm-icon { display: inline-flex; width: 1em; height: 1em; flex: none; } .sdm-page .sdm-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sdm-page .btn { display: inline-flex; align-items: center; gap: 6px; } .sdm-page .btn .sdm-icon { font-size: 14px; } /* ── En-tête ────────────────────────────────────────────────────────────── */ .sdm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .sdm-title { margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; } .sdm-subtitle { margin: 0; color: var(--sdm-soft); } .sdm-btn-ghost { color: var(--sdm-soft); background: transparent; border: 1px solid var(--sdm-edge); } .sdm-btn-ghost:hover { color: var(--sdm-ink); background: var(--sdm-background); } /* ── Parcours (étapes + chiffres) ───────────────────────────────────────── */ .sdm-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: sdm-step; } .sdm-step { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px 12px 50px; text-align: left; background: var(--sdm-background); border: 1px solid var(--sdm-edge); border-radius: var(--sdm-radius); box-shadow: var(--sdm-shadow); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .sdm-step:hover { border-color: var(--sdm-accent); transform: translateY(-1px); } .sdm-step:focus-visible { outline: 2px solid var(--sdm-accent); outline-offset: 2px; } .sdm-step-circle { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--sdm-nothing-soft); color: var(--sdm-nothing); } .sdm-step-circle .sdm-icon { font-size: 14px; } .sdm-step-name { font-size: 12px; font-weight: 600; color: var(--sdm-soft); text-transform: uppercase; letter-spacing: .04em; } .sdm-step-figure { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } .sdm-step-text { font-size: 12px; color: var(--sdm-soft); } .sdm-step-ok .sdm-step-circle { background: var(--sdm-ok-soft); color: var(--sdm-ok); } .sdm-step-pending .sdm-step-circle { background: var(--sdm-pending-soft); color: var(--sdm-pending); } .sdm-step-pending .sdm-step-text { color: var(--sdm-pending); font-weight: 600; } .sdm-step-alert { border-color: var(--sdm-alert); } .sdm-step-alert .sdm-step-circle { background: var(--sdm-alert); color: #fff; } .sdm-step-alert .sdm-step-text { color: var(--sdm-alert); font-weight: 700; } .sdm-step-loading .sdm-step-figure { color: transparent; } .sdm-step-loading .sdm-step-figure::after { content: ""; display: block; width: 40px; height: 20px; border-radius: 4px; background: var(--sdm-nothing-soft); animation: sdm-pulse 1.2s ease-in-out infinite; } /* ── Onglets ────────────────────────────────────────────────────────────── */ .sdm-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--sdm-edge); margin-bottom: 16px; scrollbar-width: thin; } .sdm-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0; color: var(--sdm-soft); font-weight: 600; white-space: nowrap; cursor: pointer; border-radius: 8px 8px 0 0; transition: color .15s, background .15s; } .sdm-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sdm-accent); transform: scaleX(0); transition: transform .2s ease; } .sdm-tab:hover { color: var(--sdm-ink); background: var(--sdm-background-page); } .sdm-tab.active { color: var(--sdm-accent); } .sdm-tab.active::after { transform: scaleX(1); } .sdm-tab:focus-visible { outline: 2px solid var(--sdm-accent); outline-offset: -2px; } .sdm-tab > .sdm-icon { font-size: 16px; } .sdm-pill { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--sdm-alert); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } .sdm-panel { animation: sdm-appear .2s ease; } /* ── Barres, champs, cartes ─────────────────────────────────────────────── */ .sdm-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; } .sdm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .sdm-actions select.form-control { width: auto; min-width: 140px; } .sdm-filters { display: flex; flex-wrap: wrap; gap: 8px; } .sdm-filters select.form-control { width: auto; min-width: 140px; } .sdm-search { position: relative; margin: 0; } .sdm-search .sdm-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sdm-soft); font-size: 14px; pointer-events: none; } .sdm-search input { padding-left: 30px; min-width: 240px; } .sdm-page .form-control { border-color: var(--sdm-edge); border-radius: 8px; } .sdm-page .form-control:focus { border-color: var(--sdm-accent); box-shadow: 0 0 0 3px var(--sdm-accent-soft); } .sdm-page .btn-sm { border-radius: 8px; padding: 5px 12px; } .sdm-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 160px; flex: 1 1 160px; } .sdm-field > span { font-size: 12px; font-weight: 600; color: var(--sdm-soft); } .sdm-field-short { flex: 0 1 110px; min-width: 100px; } .sdm-row-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .sdm-row-fields .sdm-actions { margin-left: 0; } /* Test API : styles de Standards (std-api-*, settings-standards.css), rien de propre au module (TH.10). */ #sdmApiCall:empty { display: none; } .sdm-card { background: var(--sdm-background); border: 1px solid var(--sdm-edge); border-radius: var(--sdm-radius); box-shadow: var(--sdm-shadow); padding: 16px; margin-bottom: 16px; } .sdm-card-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; } .sdm-card-table { padding: 0; overflow: hidden; } .sdm-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sdm-soft); margin: 24px 0 10px; } .sdm-help { color: var(--sdm-soft); font-size: 13px; } .sdm-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; } .sdm-code { font-family: var(--sdm-mono); font-size: .92em; } .sdm-inset { border: 1px solid var(--sdm-edge); border-left: 4px solid var(--sdm-accent); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; background: var(--sdm-accent-soft); font-size: 13px; } .sdm-inset ul { padding-left: 18px; margin: 6px 0 0; } /* ── Tableaux ───────────────────────────────────────────────────────────── */ .sdm-table { font-size: 13px; margin: 0; } .sdm-table thead th { border-top: 0; border-bottom: 1px solid var(--sdm-edge); background: var(--sdm-background-page); color: var(--sdm-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .sdm-table td { vertical-align: middle; border-top: 1px solid var(--sdm-edge); } .sdm-table tbody tr { transition: background .1s; } .sdm-table tbody tr:hover td { background: #fafbfd; } .sdm-table input.form-control, .sdm-table select.form-control { min-width: 90px; } .sdm-table tr.sdm-row-pending td { background: var(--sdm-alert-soft); } .sdm-table tr.sdm-row-pending td:first-child { box-shadow: inset 3px 0 0 var(--sdm-alert); } .sdm-table tr.sdm-inactive td { color: var(--sdm-soft); } .sdm-number { text-align: right; font-variant-numeric: tabular-nums; } /* ── États (toujours un mot ; migration en attente : rouge, plan § 21) ──── */ .sdm-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 10px 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--sdm-nothing-soft); color: var(--sdm-nothing); } .sdm-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sdm-state-creee, .sdm-state-integre, .sdm-state-valide, .sdm-state-mg-j...
