/* ═══════════════════════════════════════════════════════════════════════════
   App-Cap — Zone « Système » : Réglages (sx-), Administration (ad-), Groupes (gr-),
   Analytique (an-), Profil (pf-), Authentification (au-), Erreurs (er-).
   Uniquement des jetons var(--ui-*) : aucune couleur en dur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Réglages : navigation à deux niveaux (rang 1 = en-tête, rang 2 = barre secondaire) ── */
.sx-main { min-width: 0; }
.sx-pane[hidden] { display: none; }
/* Fil d'Ariane vide (page Paramètres) : ne réserve pas de place */
.header-breadcrumb:not(:has(*)) { display: none; }

/* Rang 1 (catégories dans l'en-tête, .sx-cats/.sx-cat) : déplacé dans shell.css
   pour être partagé par toutes les pages à navigation à deux niveaux. */

/* Rang 2 (barre secondaire + onglets) : déplacé dans shell.css pour être partagé
   par toutes les pages à navigation à deux niveaux (Paramètres, Studio, …). */

@media (max-width: 991.98px) {
  .sx-cats-wrap { justify-content: flex-start; }
  .sx-cat { padding: 0 12px; font-size: .82rem; }
}

/* ── En-tête de section : barre d'actions compacte (sans grand titre) ──────── */
.sx-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--ui-border); }
.sx-head-txt { min-width: 0; }
.sx-head-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sx-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ui-warn); }
.sx-dirty[hidden] { display: none; }
.sx-dirty i { font-size: .5rem; }
.sx-meta { font-size: .8rem; color: var(--ui-muted); }
.sx-meta b { color: var(--ui-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-size: .75rem; }
@media (max-width: 991.98px) { .sx-head { justify-content: stretch; } .sx-head-act { width: 100%; margin-left: 0; } .sx-head-act .btn-primary { flex: 1 1 auto; } }

/* ── Cartes de formulaire ──────────────────────────────────────────────────── */
.sx-group { margin-bottom: 16px; }
.sx-group[hidden] { display: none; }
.sx-group > .panel-head > span:first-child { display: inline-flex; align-items: center; min-width: 0; }
.sx-group > .panel-head > span:first-child > i { color: var(--ui-primary); }
.sx-panel-tools { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.sx-gdesc { font-size: .88rem; color: var(--ui-muted); margin: 0 0 14px; max-width: 75ch; }
.sx-group .form-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sx-group .field .form-label { margin-bottom: 6px; }
.sx-group textarea.form-control { resize: vertical; min-height: 44px; }
.sx-mono { font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .85rem; line-height: 1.5; }
.field.is-rtl textarea, .field.is-rtl input { text-align: right; }
.sx-switch.form-check { padding-left: 12px; }
.sx-switch .form-check-input { float: none; margin-left: 0; }
.sx-switch { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-2); }
.sx-switch .form-check-input { margin-top: 0; flex: none; }
.sx-switch .form-check-label { font-size: .9rem; font-weight: 500; color: var(--ui-text); margin-left: 4px; }
.sx-switch + .field-help { margin-left: 2px; }
.sx-note { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ui-text-2); }
.sx-note > i { color: var(--ui-info); margin-top: 2px; }
.sx-note-block { padding: 12px 14px; margin-bottom: 16px; background: var(--ui-info-bg); border-radius: var(--ui-radius-sm); }
.form-grid > .sx-note.full { padding: 6px 0 0; font-weight: 600; font-size: .85rem; color: var(--ui-text); border-top: 1px dashed var(--ui-border); margin-top: 6px; }
.form-grid > .sx-note.full:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.sx-hint { font-size: .8rem; color: var(--ui-muted); margin: 6px 0; }
.sx-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sx-subtabs { margin-bottom: 16px; }
.field .form-control.is-invalid, .field .form-select.is-invalid { border-color: var(--ui-bad); box-shadow: 0 0 0 3px var(--ui-bad-bg); }

.sx-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sx-seg label { position: relative; cursor: pointer; }
.sx-seg input { position: absolute; opacity: 0; inset: 0; }
.sx-seg span { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-weight: 600; font-size: .9rem; color: var(--ui-text); }
.sx-seg small { font-weight: 400; font-size: .78rem; color: var(--ui-muted); }
.sx-seg input:checked + span { border-color: var(--ui-primary); background: rgba(var(--ui-primary-rgb), .08); box-shadow: inset 0 0 0 1px var(--ui-primary); }
.sx-seg input:focus-visible + span { box-shadow: var(--ui-ring); }

.sx-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.sx-kv-item { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--ui-muted); text-transform: capitalize; }
.sx-kv-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sx-acc { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); margin-top: 8px; background: var(--ui-surface-2); }
.sx-acc > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; text-transform: capitalize; }
.sx-acc > summary::-webkit-details-marker { display: none; }
.sx-acc > summary > i { transition: transform .15s; color: var(--ui-muted); }
.sx-acc[open] > summary > i { transform: rotate(90deg); }
.sx-acc-body { padding: 4px 14px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }

.sx-pal { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ui-border); }
.sx-pal:last-child { border-bottom: 0; }
.sx-pal-name { width: 120px; font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; }
.sx-pal-sw { display: flex; gap: 4px; }
.sx-pal-sw i { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ui-border-strong); }

.sx-table { font-size: .88rem; margin: 0; }
.sx-table th { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); background: var(--ui-bg-2); white-space: nowrap; }
.sx-table td, .sx-table th { padding: 8px 10px; vertical-align: middle; }
.sx-table .form-control { min-width: 88px; padding: 6px 8px; font-size: .88rem; }
.sx-table tbody th { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ui-text); background: transparent; }

.sx-vlist { display: flex; flex-direction: column; gap: 8px; }
.sx-vrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (max-width: 575.98px) { .sx-vrow { grid-template-columns: minmax(0, 1fr) auto; } .sx-vrow input:nth-child(2) { grid-column: 1; } }

/* ── États vides / chargement / barres ────────────────────────────────────── */
.sx-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 32px 16px; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); color: var(--ui-muted); font-size: .88rem; }
.sx-empty > i { font-size: 1.8rem; color: var(--ui-primary); opacity: .8; }
.sx-empty > b { color: var(--ui-text); font-size: .95rem; }
.sx-empty.sm { padding: 20px 12px; }
.sx-loading { padding: 18px 4px; color: var(--ui-muted); font-size: .88rem; }
.sx-bar { display: block; flex: 1 1 auto; min-width: 36px; height: 6px; border-radius: 999px; background: var(--ui-bg-2); overflow: hidden; }
.sx-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ui-primary); transition: width .3s; }
.tone-ok .sx-bar > i { background: var(--ui-ok); } .tone-warn .sx-bar > i { background: var(--ui-warn); } .tone-bad .sx-bar > i { background: var(--ui-bad); }
.sx-rpd-item.ok .sx-bar > i { background: var(--ui-ok); } .sx-rpd-item.warn .sx-bar > i { background: var(--ui-warn); } .sx-rpd-item.bad .sx-bar > i { background: var(--ui-bad); }

/* ── Vue d'ensemble ───────────────────────────────────────────────────────── */
.sx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.sx-cols.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sx .sx-cols > .panel, .sx .sx-cols > .sx-group { margin: 0; }
.sx-cols.one { grid-template-columns: minmax(0, 1fr); }
.sx .mini-stats b { white-space: nowrap; }
.sx-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.sx-shortcuts a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text); text-decoration: none; }
.sx-shortcuts a:hover { border-color: rgba(var(--ui-primary-rgb), .4); background: rgba(var(--ui-primary-rgb), .04); }
.sx-shortcuts a > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--ui-primary-rgb), .1); color: var(--ui-primary); font-size: 1.1rem; flex: none; }
.sx-shortcuts b { display: block; font-size: .92rem; }
.sx-shortcuts small { display: block; font-size: .8rem; color: var(--ui-muted); }
.sx-health { padding: 12px 14px; border-radius: var(--ui-radius-sm); background: var(--ui-surface-2); border: 1px solid var(--ui-border); margin-bottom: 10px; }
.sx-health-t { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: .9rem; }
.sx-health-n { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ui-muted); }
.sx-health-n b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.sx-usages { display: flex; flex-direction: column; gap: 12px; }
.sx-usage-h { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; margin-bottom: 4px; }
.sx-usage small { display: block; margin-top: 3px; font-size: .78rem; color: var(--ui-muted); }

/* ── Clés API ─────────────────────────────────────────────────────────────── */
.sx-ptabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--ui-bg-2); border-radius: var(--ui-radius-sm); overflow-x: auto; scrollbar-width: none; }
.sx-ptabs::-webkit-scrollbar { display: none; }
.sx-ptabs > button { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; justify-content: center; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-muted); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.sx-ptabs > button:hover { color: var(--ui-text); }
.sx-ptabs > button.active { background: var(--ui-surface); color: var(--ui-primary); box-shadow: var(--ui-shadow-xs); }
.sx-ptabs > button:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.sx-ptabs .count, .sx-mprov-h .count, #sx-p-cats .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ui-bg-2); font-size: .75rem; color: var(--ui-text-2); }
.sx-ptabs > button.active .count { background: rgba(var(--ui-primary-rgb), .14); color: var(--ui-primary); }
.sx-ptabs .sx-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--ui-warn); }
.sx-ptabs .sx-dot.brand { background: var(--ui-primary); }

.sx-keylist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sx-key { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.sx-key:hover { border-color: var(--ui-border-strong); }
.sx-key.is-off { background: var(--ui-surface-2); }
.sx-key.is-off .sx-key-main { opacity: .65; }
.sx-key.dragging { opacity: .5; border-style: dashed; }
.sx-key.drop-before::before, .sx-key.drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--ui-primary); }
.sx-key.drop-before::before { top: -6px; } .sx-key.drop-after::after { bottom: -6px; }
.sx-grip { color: var(--ui-muted); cursor: grab; padding-top: 6px; font-size: 1.1rem; }
.sx-key-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-key-line { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.sx-key-line strong { font-size: .92rem; overflow-wrap: anywhere; }
.sx-key-secret { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sx-secret { font-size: .84rem; padding: 3px 8px; border-radius: 6px; background: var(--ui-code-bg); color: var(--ui-text-2); overflow-wrap: anywhere; letter-spacing: .02em; }
.sx-key-act { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.sx-rpd { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-rpd-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--ui-surface-2); border: 1px solid var(--ui-border); font-size: .75rem; }
.sx-rpd-item .sx-bar { width: 36px; min-width: 36px; flex: none; }
.sx-rpd-item b { font-variant-numeric: tabular-nums; }
.sx-keyadd { padding: 12px; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface-2); }
.sx-keyadd-t { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); margin-bottom: 8px; }
.sx-keyadd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; }
.sx-pw { position: relative; display: flex; gap: 6px; align-items: center; }
.sx-pw .form-control { flex: 1; min-width: 0; }
@media (max-width: 767.98px) {
  .sx-keyadd-row { grid-template-columns: minmax(0, 1fr); }
  .sx-key { flex-wrap: wrap; } .sx-key-act { width: 100%; justify-content: flex-start; padding-left: 30px; }
}

/* ── Modèles LLM et matrice ───────────────────────────────────────────────── */
.sx-mprov { margin-bottom: 18px; }
.sx-mprov:last-child { margin-bottom: 0; }
.sx-mprov-h { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .92rem; margin-bottom: 8px; }
.sx-mprov-h > i { color: var(--ui-primary); }
.sx-mtable tr.is-off td { opacity: .55; }
.sx-mname { font-weight: 600; font-size: .92rem; }
.sx-mid { display: inline-block; margin-top: 2px; font-size: .75rem; color: var(--ui-muted); overflow-wrap: anywhere; }
.sx-mdesc { font-size: .8rem; color: var(--ui-muted); margin-top: 4px; max-width: 60ch; }
.sx-lim { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--ui-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-role { min-width: 118px; }
.sx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 12px; font-size: .8rem; color: var(--ui-muted); }
.sx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sx-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--ui-ok-bg); border: 1px solid var(--ui-ok); }
.sx-legend .tone-warn i { background: var(--ui-warn-bg); border-color: var(--ui-warn); }
.sx-legend .tone-bad i { background: var(--ui-bad-bg); border-color: var(--ui-bad); }
.sx-legend .tone-off i { background: var(--ui-bg-2); border-color: var(--ui-border-strong); }

.sx-matrix { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.sx-matrix-grid { min-width: min-content; }
.sx-mrow { display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(var(--cols, 3), minmax(128px, 1fr)); gap: 0; border-top: 1px solid var(--ui-border); }
.sx-mrow:first-child { border-top: 0; }
.sx-mhead { background: var(--ui-bg-2); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); position: sticky; top: 0; }
.sx-mhead > div { padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-mkey { padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: sticky; left: 0; background: var(--ui-surface); z-index: 1; }
.sx-mhead .sx-mkey { background: var(--ui-bg-2); }
.sx-mrow.is-off .sx-mkey-n { opacity: .6; }
.sx-mkey-n { font-weight: 650; font-size: .9rem; overflow-wrap: anywhere; }
.sx-mkey-m { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.sx-mkey-m code { font-size: .72rem; color: var(--ui-muted); }
.sx-mkey-s { font-size: .75rem; color: var(--ui-muted); }
.sx-mcell { position: relative; margin: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ui-border); background: var(--ui-surface-2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx-mcell .mc-model { display: none; font-size: .75rem; font-weight: 600; color: var(--ui-muted); }
.sx-mcell .mc-use { font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sx-mcell .mc-use small { font-size: .75rem; font-weight: 500; color: var(--ui-muted); }
.sx-mcell .mc-na { color: var(--ui-muted); }
.sx-mcell .mc-note { font-size: .75rem; font-weight: 600; }
.sx-mcell-menu { position: absolute; top: 4px; right: 4px; }
.sx-mcell-menu .icon-btn { width: 28px; height: 28px; border: 0; }
.sx-mcell.tone-ok { background: var(--ui-ok-bg); border-color: transparent; } .sx-mcell.tone-ok .mc-note { color: var(--ui-ok); }
.sx-mcell.tone-warn { background: var(--ui-warn-bg); border-color: transparent; } .sx-mcell.tone-warn .mc-note { color: var(--ui-warn); }
.sx-mcell.tone-bad { background: var(--ui-bad-bg); border-color: transparent; } .sx-mcell.tone-bad .mc-note { color: var(--ui-bad); }
.sx-mcell.tone-off { background: var(--ui-bg-2); border-color: transparent; } .sx-mcell.tone-off .mc-note { color: var(--ui-muted); }
.sx-mcell.tone-na { background: transparent; border: 1px dashed var(--ui-border); } .sx-mcell.tone-na .mc-note { color: var(--ui-muted); font-weight: 400; }
@media (max-width: 767.98px) {
  .sx-matrix { overflow: visible; border: 0; }
  .sx-mhead { display: none; }
  .sx-mrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
  .sx-mkey { grid-column: 1 / -1; position: static; background: transparent; border-bottom: 1px solid var(--ui-border); }
  .sx-mcell .mc-model { display: block; }
}

/* ── Prompts ──────────────────────────────────────────────────────────────── */
.sx-prompts { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.sx-pl { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--header-h, 56px) + 90px); max-height: calc(100vh - var(--header-h, 56px) - 110px); }
.sx-pl-search.fb-search { position: relative; }
.sx-pl-search.fb-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; }
.sx-pl-search.fb-search input { width: 100%; padding: 8px 12px 8px 34px; font-size: .9rem; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text); }
.sx-pl-search.fb-search input:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-ring); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chips > button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text-2); font-size: .82rem; font-weight: 600; }
.sx-chips > button:hover { border-color: var(--ui-border-strong); }
.sx-chips > button.active { background: rgba(var(--ui-primary-rgb), .12); border-color: rgba(var(--ui-primary-rgb), .4); color: var(--ui-primary); }
.sx-plist { overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); padding: 6px; min-height: 120px; }
.sx-pgroup { padding: 10px 10px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); }
.sx-pitem { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ui-text); }
.sx-pitem:hover { background: rgba(var(--ui-primary-rgb), .06); }
.sx-pitem.active { background: rgba(var(--ui-primary-rgb), .12); }
.sx-pitem:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.sx-pitem-t { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.sx-pitem-k { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sx-pitem-k code { font-size: .75rem; color: var(--ui-muted); overflow-wrap: anywhere; }
.sx-pe { min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sx-pe-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sx-pe-head h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 650; }
.sx-pe-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sx-pe-meta code { font-size: .78rem; color: var(--ui-muted); }
.sx-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sx-vars > span { font-size: .78rem; color: var(--ui-muted); margin-right: 4px; }
.sx-var { padding: 3px 8px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-code-bg); color: var(--ui-text-2); font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .78rem; }
.sx-var:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.sx-ptext { font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .86rem; line-height: 1.6; min-height: 320px; resize: vertical; white-space: pre-wrap; tab-size: 2; }
.sx-pe-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--ui-muted); }
.sx-pe-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sx-warns { display: flex; flex-direction: column; gap: 6px; }
.sx-warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--ui-radius-sm); font-size: .84rem; }
.sx-warn code { font-size: .8rem; }
.sx-warn.bad { background: var(--ui-bad-bg); color: var(--ui-bad); } .sx-warn.warn { background: var(--ui-warn-bg); color: var(--ui-warn); } .sx-warn.info { background: var(--ui-info-bg); color: var(--ui-info); }
.sx-commentbar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sx-commentbar label { font-size: .82rem; font-weight: 600; color: var(--ui-text-2); }
.sx-commentbar .form-control { flex: 1 1 280px; max-width: 520px; }
@media (max-width: 991.98px) { .sx-prompts { grid-template-columns: minmax(0, 1fr); } .sx-pl { position: static; max-height: none; } .sx-plist { max-height: 300px; } .sx-pe { padding: 14px; } }

/* ── Fenêtres : aperçu, historique, comparaison ───────────────────────────── */
.sx-pre { margin: 0; padding: 12px 14px; max-height: 55vh; overflow: auto; background: var(--ui-code-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .84rem; line-height: 1.55; color: var(--ui-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-prev-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sx-hist { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; min-height: 280px; }
.sx-hlist { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.sx-hitem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); text-align: left; font-size: .82rem; color: var(--ui-text-2); }
.sx-hitem b { color: var(--ui-text); }
.sx-hitem small { flex-basis: 100%; color: var(--ui-muted); font-size: .78rem; overflow-wrap: anywhere; }
.sx-hitem:hover { border-color: var(--ui-border-strong); }
.sx-hitem.active { border-color: var(--ui-primary); background: rgba(var(--ui-primary-rgb), .08); }
.sx-hview { min-width: 0; }
.sx-hv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sx-hv-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sx-diff { margin: 0; padding: 10px 0; max-height: 50vh; overflow: auto; background: var(--ui-code-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .82rem; line-height: 1.5; }
.sx-diff span { display: block; padding: 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-diff .add { background: var(--ui-ok-bg); color: var(--ui-ok); } .sx-diff .del { background: var(--ui-bad-bg); color: var(--ui-bad); } .sx-diff .ctx { color: var(--ui-muted); }
.sx-change { padding: 8px 0; border-bottom: 1px solid var(--ui-border); font-size: .82rem; overflow-wrap: anywhere; }
.sx-change-old { color: var(--ui-bad); margin-top: 4px; } .sx-change-new { color: var(--ui-ok); margin-top: 2px; }
.sx-qt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sx-qt-kpis > div { padding: 10px 12px; border-radius: 10px; background: var(--ui-bg-2); display: flex; flex-direction: column; }
.sx-qt-kpis b { font-size: 1.3rem; } .sx-qt-kpis span { font-size: .78rem; color: var(--ui-muted); }
@media (max-width: 767.98px) { .sx-hist { grid-template-columns: minmax(0, 1fr); } .sx-hlist { max-height: 200px; } }

/* ── Médias ───────────────────────────────────────────────────────────────── */
.sx-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px; text-align: center; border: 2px dashed var(--ui-border-strong); border-radius: var(--ui-radius); background: var(--ui-surface-2); color: var(--ui-muted); font-size: .85rem; cursor: pointer; }
.sx-drop > i { font-size: 1.9rem; color: var(--ui-primary); }
.sx-drop > b { color: var(--ui-text); font-size: .92rem; }
.sx-drop:hover, .sx-drop.over { border-color: var(--ui-primary); background: rgba(var(--ui-primary-rgb), .06); }
.sx-drop:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.sx-drop.busy { opacity: .8; pointer-events: none; }
.sx-progress { width: 100%; max-width: 320px; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--ui-bg-2); overflow: hidden; }
.sx-progress[hidden] { display: none; }
.sx-progress > i { display: block; height: 100%; background: var(--ui-primary); transition: width .2s; }
.sx-assets { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-height: 520px; overflow-y: auto; }
.sx-asset { padding: 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); display: flex; flex-direction: column; gap: 8px; }
.sx-asset-top { display: flex; align-items: center; gap: 10px; }
.sx-asset-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--ui-primary-rgb), .1); color: var(--ui-primary); flex: none; }
.sx-asset-top > .min-w-0 { flex: 1; }
.sx-asset-name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-asset-size { font-size: .78rem; color: var(--ui-muted); }
.sx-asset-media { width: 100%; max-height: 180px; border-radius: 8px; background: var(--ui-bg-2); }


/* ═══ Authentification (au-) ═══════════════════════════════════════════════════ */
.au-body { min-height: 100vh; background: var(--ui-bg); }
.au-skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 8px 14px; border-radius: 8px; background: var(--ui-primary-solid); color: var(--ui-on-primary); }
.au-skip:focus { left: 8px; }
.au-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.au-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 48px; background: var(--ui-sidebar-bg); color: var(--ui-sidebar-text); position: relative; overflow: hidden; }
.au-brand::before { content: ''; position: absolute; inset: auto -20% -30% auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ui-primary-rgb), .35), transparent); pointer-events: none; }
.au-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ui-on-primary); text-decoration: none; }
.au-logo:hover { color: var(--ui-on-primary); }
.au-logo-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ui-primary-solid); color: var(--ui-on-primary); font-size: 1.1rem; }
.au-brand-body { position: relative; max-width: 440px; }
html body .au-brand-body h2 { font-size: 1.9rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ui-on-primary); margin: 0 0 12px; }
.au-brand-body p { font-size: 1rem; color: var(--ui-sidebar-text); margin: 0 0 28px; }
.au-brand-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.au-brand-body li { display: flex; gap: 14px; align-items: flex-start; font-size: .92rem; color: var(--ui-sidebar-text); }
.au-brand-body li > i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(var(--ui-primary-rgb), .3); color: var(--ui-on-primary); font-size: 1.05rem; }
.au-brand-body li b { display: block; color: var(--ui-on-primary); font-size: .95rem; }
.au-brand-foot { font-size: .8rem; color: var(--ui-sidebar-muted); position: relative; }

.au-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 20px 32px; min-width: 0; }
.au-top { width: 100%; max-width: 440px; display: flex; align-items: center; justify-content: space-between; }
.au-logo-sm { display: none; color: var(--ui-text); }
.au-top .theme-toggle { margin-left: auto; }
.au-card { width: 100%; max-width: 440px; padding: 32px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 18px; box-shadow: var(--ui-shadow-md); }
.au-head { text-align: center; margin-bottom: 22px; }
.au-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: rgba(var(--ui-primary-rgb), .12); color: var(--ui-primary); font-size: 1.35rem; }
.au-head h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.au-head p { margin: 0; font-size: .92rem; color: var(--ui-muted); }
.au-foot { margin: 0; font-size: .9rem; color: var(--ui-muted); text-align: center; max-width: 440px; }
.au-foot a { font-weight: 600; }
.au-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--ui-radius-sm); font-size: .9rem; }
.au-alert > i { margin-top: 2px; flex: none; }
.au-alert.danger { background: var(--ui-bad-bg); color: var(--ui-bad); }
.au-alert.success { background: var(--ui-ok-bg); color: var(--ui-ok); }
.au-alert.warning { background: var(--ui-warn-bg); color: var(--ui-warn); }
.au-alert.info { background: var(--ui-info-bg); color: var(--ui-info); }
.au-field { margin-bottom: 16px; }
.au-field > label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 600; color: var(--ui-text-2); }
.au-req { color: var(--ui-bad); }
.au-field .form-control { min-height: 46px; font-size: 1rem; }
.au-msg { min-height: 0; margin-top: 5px; font-size: .8rem; color: var(--ui-muted); }
.au-msg:empty { display: none; }
.au-msg.is-error { color: var(--ui-bad); font-weight: 500; }
.au-field .form-control.is-invalid { border-color: var(--ui-bad); box-shadow: 0 0 0 3px var(--ui-bad-bg); }
.au-pw { position: relative; }
.au-pw .form-control { padding-right: 48px; }
.au-pw-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-muted); font-size: 1.1rem; }
.au-pw-btn:hover { background: rgba(var(--ui-primary-rgb), .08); color: var(--ui-primary); }
.au-pw-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.au-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.au-strength > i { height: 4px; border-radius: 4px; background: var(--ui-bg-2); }
.au-strength > i.on.l1 { background: var(--ui-bad); } .au-strength > i.on.l2 { background: var(--ui-warn); } .au-strength > i.on.l3, .au-strength > i.on.l4 { background: var(--ui-ok); }
.au-strength-lbl { margin-top: 4px; font-size: .78rem; color: var(--ui-muted); min-height: 1em; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 4px 0 18px; font-size: .88rem; }
.au-hint { color: var(--ui-muted); font-size: .8rem; }
.au-submit { width: 100%; min-height: 48px; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 991.98px) {
  .au-shell { grid-template-columns: minmax(0, 1fr); }
  .au-brand { display: none; }
  .au-main { justify-content: flex-start; padding-top: 16px; }
  .au-logo-sm { display: inline-flex; }
}
@media (max-width: 480px) { .au-card { padding: 22px 18px; border-radius: 16px; } .au-head h1 { font-size: 1.3rem; } }