/* ═══════════════════════════════════════════════════════════════════
   donna — states-1f5fca5a.css  (cleané)
   ─ z-index migrés vers tokens (--z-* dans _z-index-scale.css) : 2 occurrence(s)
   ─ Aucune autre modification. Voir CHANGELOG.md.
   ═══════════════════════════════════════════════════════════════════ */

/* states.css — Margot handoff avril 2026
   Empty states · Skeletons · Errors · Confirmations
   Tokens :root et topbar déjà dans style.css/themes.css */

/* ═══ EMPTY STATES ═══ */
.empty{
  text-align:center; padding:48px 24px; max-width:420px; margin:0 auto;
}
.empty-illo{
  width:64px; height:64px; margin:0 auto 20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:grid; place-items:center;
  color:var(--muted);
  position:relative;
}
.empty-illo.welcome{
  background:var(--text); color:var(--bg); border:none;
}
.empty-illo svg{width:28px; height:28px; stroke-width:1.5}
.empty h4{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:-.015em; margin-bottom:8px;
}
.empty p{
  font-size:13.5px; color:var(--text-dim); line-height:1.55;
  margin-bottom:22px;
}
.empty .cta-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

/* Welcome dashboard full demo */

.welcome-dash-main .greet{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  margin-bottom:16px;
}

.welcome-dash-main .steps{display:flex; flex-direction:column; gap:10px; margin-bottom:28px}
.welcome-dash-main .step{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--s2);
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; color:var(--text);
  cursor:pointer; transition:all .12s;
}
.welcome-dash-main .step:hover{background:var(--s3); border-color:var(--border-hi)}
.welcome-dash-main .step .n{
  width:20px; height:20px; border-radius:50%;
  background:var(--text); color:var(--bg);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  flex-shrink:0;
}
.welcome-dash-main .step .chev{margin-left:auto; color:var(--muted)}
.welcome-dash-main .step.done .n{background:var(--green); color:#fff}
.welcome-dash-main .step.done .label{color:var(--muted); text-decoration:line-through}

.welcome-dash-side .tip{
  font-size:12.5px; color:var(--text-dim); line-height:1.55;
}

.welcome-dash-side .quick-list a .arrow{margin-left:auto; color:var(--muted); font-size:10px}

/* Filtre sans résultat */
.nores{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:40px 28px;
  display:flex; align-items:center; gap:24px;
}

.nores h4{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:-.01em; margin-bottom:4px;
}
.nores p{font-size:13px; color:var(--text-dim); margin-bottom:12px}
.nores .active-filters{
  display:flex; gap:6px; flex-wrap:wrap;
}
.nores .fchip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; font-size:11px; font-weight:500;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-dim);
}
.nores .fchip .x{
  cursor:pointer; color:var(--muted);
  width:12px; height:12px; display:grid; place-items:center;
  border-radius:50%;
}
.nores .fchip .x:hover{background:var(--chaud); color:#fff}
.nores .actions{margin-left:auto; display:flex; gap:6px; flex-shrink:0}

/* Faux list en état vide — silhouette */
.list-empty{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  position:relative;
}

.list-empty-hd .title{font-weight:600; color:var(--text); font-size:14px}
.list-empty-hd .count{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  padding:2px 7px; background:var(--s2); border-radius:var(--radius-sm);
}
.list-empty-hd .spacer{flex:1}

.list-empty-body .inner{
  display:inline-block; padding:32px 44px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  max-width:420px;
}

/* ═══ LOADING / SKELETONS ═══ */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.sk{
  background:linear-gradient(90deg,
    var(--s2) 0%, var(--s3) 50%, var(--s2) 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--radius-sm);
}

/* Liste skeleton */
.sk-list{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.sk-list-row{
  display:grid; grid-template-columns:36px 1fr 100px 80px 90px;
  gap:16px; align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.sk-list-row:last-child{border-bottom:none}
.sk-avatar{width:32px; height:32px; border-radius:50%}
.sk-line{height:11px}
.sk-line.short{width:40%}
.sk-line.med{width:65%}
.sk-line.long{width:85%}
.sk-line.tiny{height:9px; width:30%; margin-top:5px}
.sk-list-row .col{display:flex; flex-direction:column; gap:2px}

/* Fiche skeleton */
.sk-fiche{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px; overflow:hidden;
}
.sk-fiche .hero{
  display:grid; grid-template-columns:72px 1fr auto; gap:18px;
  padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:22px;
}
.sk-fiche .sk-av-lg{width:72px; height:72px; border-radius:var(--radius-lg)}
.sk-fiche .hero .col{display:flex; flex-direction:column; gap:9px}
.sk-fiche .hero .pills{display:flex; gap:8px; margin-top:4px}
.sk-fiche .hero .pills .sk{height:22px; width:70px; border-radius:var(--radius)}
.sk-fiche .hero .cta{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.sk-fiche .hero .cta .sk{height:32px; width:120px; border-radius:var(--radius)}
.sk-fiche .kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:22px}
.sk-fiche .kpi{
  padding:14px; background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:8px;
}
.sk-fiche .body{display:flex; flex-direction:column; gap:10px}

/* Dashboard skeleton */
.sk-dash{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.sk-dash .card{
  padding:20px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:10px;
  min-height:120px;
}
.sk-dash .card .sk-kpi-num{height:28px; width:55%; border-radius:var(--radius)}

/* donna thinking */
.donna-thinking{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:20px 22px;
  display:flex; align-items:flex-start; gap:14px;
}
.donna-thinking .brain{
  width:32px; height:32px; flex-shrink:0;
  border-radius:var(--radius); background:var(--text);
  color:var(--bg); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:13px;
  position:relative;
}
.donna-thinking .brain::after{
  content:''; position:absolute; inset:-3px;
  border-radius:var(--radius);
  border:2px solid var(--accent);
  opacity:0; animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0; transform:scale(1)}
  50%{opacity:.4; transform:scale(1.08)}
}
.donna-thinking .body{flex:1; min-width:0}
.donna-thinking .head{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:12.5px; color:var(--text-dim);
}
.donna-thinking .head strong{color:var(--text); font-weight:600}
.donna-thinking .step-lbl{color:var(--muted); font-family:var(--font-mono); font-size:11px}
.donna-thinking .dots{display:inline-flex; gap:3px; margin-left:4px}
.donna-thinking .dots span{
  width:4px; height:4px; border-radius:50%; background:var(--accent);
  animation:bounce 1.2s ease-in-out infinite;
}
.donna-thinking .dots span:nth-child(2){animation-delay:.15s}
.donna-thinking .dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{
  0%,80%,100%{transform:translateY(0); opacity:.3}
  40%{transform:translateY(-4px); opacity:1}
}
.donna-thinking .think-lines{display:flex; flex-direction:column; gap:7px}

/* ═══ ERRORS ═══ */
.err{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:40px 32px;
  text-align:center; max-width:480px; margin:0 auto;
}
.err .ic{
  width:52px; height:52px; margin:0 auto 18px;
  border-radius:var(--radius-lg);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--chaud) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--chaud) 28%, transparent);
  color:var(--chaud);
}
.err.warn .ic{
  background:color-mix(in srgb, var(--tiede) 12%, transparent);
  border-color:color-mix(in srgb, var(--tiede) 28%, transparent);
  color:var(--tiede);
}
.err.info .ic{
  background:color-mix(in srgb, var(--froid) 12%, transparent);
  border-color:color-mix(in srgb, var(--froid) 28%, transparent);
  color:var(--froid);
}
.err .ic svg{width:24px; height:24px}
.err h4{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:-.015em; margin-bottom:8px;
}
.err p{font-size:13.5px; color:var(--text-dim); line-height:1.55; margin-bottom:6px}
.err code{
  display:inline-block; margin-top:8px; padding:3px 7px;
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  background:var(--s2); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.err .cta-row{display:flex; gap:8px; justify-content:center; margin-top:20px; flex-wrap:wrap}

/* Offline banner */
.offline-banner{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}

.offline-strip .dot{
  width:7px; height:7px; border-radius:50%; background:var(--tiede);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tiede) 20%, transparent);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.35}}

.offline-body li .check{
  width:14px; height:14px; border-radius:50%;
  background:var(--green); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
}
.offline-body li .check svg{width:9px; height:9px; stroke-width:3.5}

.offline-body li .time{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--muted)}

/* Conflict banner */

.conflict .ic{
  width:28px; height:28px; flex-shrink:0;
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--tiede) 14%, transparent);
  color:var(--tiede);
  display:grid; place-items:center;
}
.conflict .ic svg{width:14px; height:14px}
.conflict .body{flex:1; min-width:0}

.conflict .who{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:8px; font-size:11.5px; color:var(--text-dim);
}
.conflict .who .av{
  width:18px; height:18px; border-radius:50%;
  background:var(--s3); border:1px solid var(--border);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  color:var(--text-dim);
}
.conflict .actions{display:flex; gap:6px; flex-shrink:0}

/* ═══ CONFIRMATIONS ═══ */

.confirm-trigger-row .lbl{font-size:13px; color:var(--text-dim); flex:1}
.confirm-trigger-row .lbl strong{color:var(--text); font-weight:600}

/* Modal */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:440px; overflow:hidden;
  animation:modalIn .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes modalIn{
  from{opacity:0; transform:translateY(8px) scale(.98)}
  to{opacity:1; transform:none}
}
.modal-body{padding:26px 26px 22px}
.modal-body .ic{
  width:44px; height:44px; margin-bottom:16px;
  border-radius:var(--radius-lg);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--chaud) 12%, transparent);
  color:var(--chaud);
  border:1px solid color-mix(in srgb, var(--chaud) 22%, transparent);
}
.modal.info .ic{
  background:color-mix(in srgb, var(--froid) 12%, transparent);
  color:var(--froid);
  border-color:color-mix(in srgb, var(--froid) 22%, transparent);
}
.modal .ic svg{width:20px; height:20px}
.modal h4{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  letter-spacing:-.015em; margin-bottom:8px;
}
.modal p{font-size:13.5px; color:var(--text-dim); line-height:1.55}
.modal p strong{color:var(--text); font-weight:600}
.modal .highlight{
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 12px;
  margin:16px 0 0; font-size:12.5px; color:var(--text-dim); line-height:1.55;
}
.modal .highlight code{
  font-family:var(--font-mono); background:var(--bg);
  padding:1px 5px; border-radius:var(--radius-sm); color:var(--text);
  font-size:11.5px; border:1px solid var(--border);
}
.modal .type-input{margin-top:14px}
.modal .type-input label{
  display:block; font-size:11.5px; color:var(--text-dim); margin-bottom:6px;
  font-family:var(--font-mono); letter-spacing:.3px;
}
.modal .type-input input{
  width:100%; padding:9px 11px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  font-family:var(--font-mono); font-size:13px;
  transition:border-color .12s;
}
.modal .type-input input:focus{outline:none; border-color:var(--accent)}
.modal .type-input input.valid{border-color:var(--green)}
.modal-foot{
  padding:14px 20px; background:var(--s2);
  border-top:1px solid var(--border);
  display:flex; gap:8px; justify-content:flex-end;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; font-size:12.5px; font-weight:500;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--s2); color:var(--text);
  cursor:pointer; transition:all .12s;
  font-family:inherit;
}
.btn:hover{background:var(--s3); border-color:var(--border-hi)}
.btn.primary{
  background:var(--text); color:var(--bg); border-color:var(--text);
}
.btn.primary:hover{background:var(--text-dim); border-color:var(--text-dim)}
.btn.primary:disabled{
  background:color-mix(in srgb, var(--text) 30%, var(--s2));
  border-color:color-mix(in srgb, var(--text) 30%, var(--border));
  color:color-mix(in srgb, var(--bg) 70%, var(--muted));
  cursor:not-allowed;
}
.btn.danger{
  background:var(--chaud); color:#fff; border-color:var(--chaud);
}
.btn.danger:hover{filter:brightness(.92)}
.btn.danger:disabled{
  background:color-mix(in srgb, var(--chaud) 30%, var(--s2));
  border-color:color-mix(in srgb, var(--chaud) 30%, var(--border));
  color:color-mix(in srgb, var(--chaud) 60%, var(--muted));
  cursor:not-allowed;
}
.btn.ghost{background:none; border-color:transparent; color:var(--text-dim)}
.btn.ghost:hover{background:var(--s2); color:var(--text)}
.btn.sm{padding:5px 9px; font-size:11.5px}
.btn.lg{padding:9px 16px; font-size:13.5px}
.btn .k{
  font-family:var(--font-mono); font-size:10px; color:var(--muted);
  padding:1px 5px; background:var(--bg); border-radius:var(--radius-sm);
  border:1px solid var(--border); margin-left:4px;
}
.btn.primary .k{background:color-mix(in srgb, var(--bg) 30%, transparent); border-color:transparent; color:var(--bg)}

/* ════════════════════════════════════════════════════════════════════════
   v778 — UNIFIED TOAST SYSTEM
   Tous les toasts (showToast app.js, States.toast Margot, pwaToast pwa-mobile)
   partagent désormais le MÊME look : noir (var(--text)), coins 12px arrondis,
   slide-up depuis le bas. Override les inline styles existants via !important.

   3 systèmes harmonisés ici :
   1. #toast (legacy app.js, simple, 1 seul à la fois)
   2. .toast dans #toast-host ou #states-toasts (Margot avec undo/close/progress)
   3. #pwa-toast (mobile/PWA, geste haptic au déclenchement)
   ════════════════════════════════════════════════════════════════════════ */

/* Containers : tous en bas, centrés horizontalement */
#toast-host,
#states-toasts {
  position: fixed !important;
  bottom: 32px !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: var(--z-toast, 99999) !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  pointer-events: none !important;
}

/* ─── #toast (legacy app.js) ─── */
/* Override inline opacity:0/1 via la classe .show toggleée par showToast */
#toast {
  position: fixed !important;
  bottom: 32px !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  z-index: var(--z-toast, 99999) !important;
  background: var(--text) !important;
  color: var(--bg) !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) !important;
  letter-spacing: -.1px !important;
  white-space: nowrap !important;
  max-width: 90vw !important;
  /* Animation slide-up : initial state hidden + en bas */
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity .25s cubic-bezier(.2,.7,.3,1), transform .25s cubic-bezier(.2,.7,.3,1) !important;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ─── .toast (States.toast Margot dans #toast-host ou #states-toasts) ─── */
.toast {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) !important;
  font-size: 13px;
  pointer-events: auto;
  min-width: 280px;
  max-width: 90vw;
  position: relative;
  overflow: hidden;
  animation: donnaToastIn .25s cubic-bezier(.2,.7,.3,1) !important;
}
@keyframes donnaToastIn {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast.leaving {
  animation: donnaToastOut .2s forwards !important;
}
@keyframes donnaToastOut {
  to { opacity: 0; transform: translateY(-24px); }
}

/* ─── #pwa-toast (pwa-mobile.js, classe .pwa-toast-el via JS) ─── */
.pwa-toast-el {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  background: var(--text) !important;
  color: var(--bg) !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) !important;
  z-index: 2147483647 !important;
  max-width: 85vw !important;
  text-align: center !important;
  display: block !important;
  pointer-events: none !important;
  /* Initial state : masqué, en bas */
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity .25s cubic-bezier(.2,.7,.3,1), transform .25s cubic-bezier(.2,.7,.3,1) !important;
}
.pwa-toast-el.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pwa-toast-el.is-tappable {
  cursor: pointer;
  pointer-events: auto !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pwa-toast-el.is-tappable.show {
  pointer-events: auto !important;
}

/* Mobile : tous les toasts en bas remontent au-dessus de la tabbar (≈80px) */
@media (max-width: 700px) {
  #toast,
  #toast-host,
  #states-toasts {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FIN UNIFIED TOAST SYSTEM
   ════════════════════════════════════════════════════════════════════════ */

/* Toast */
#toast-host{
  /* [v1082] Center-top (était bas) — cohérence avec #states-toasts */
  position:fixed; top:24px; left:50%; transform:translateX(-50%);
  z-index: var(--z-fixed) /* was 200 */;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.toast{
  background:var(--text); color:var(--bg);
  border-radius:var(--radius);
  padding:10px 14px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-lg);
  font-size:13px;
  pointer-events:auto;
  min-width:300px;
  animation:toastIn .2s cubic-bezier(.2,.7,.3,1);
  position:relative;
  overflow:hidden;
}
@keyframes toastIn{from{opacity:0; transform:translateY(-12px)}}
.toast.leaving{animation:toastOut .2s forwards}
@keyframes toastOut{to{opacity:0; transform:translateY(-12px)}}
.toast .msg{flex:1}
.toast .msg strong{font-weight:600}
.toast .undo{
  background:none; border:none;
  color:var(--bg); opacity:.75;
  cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600;
  padding:3px 8px; border-radius:var(--radius-sm);
  text-decoration:underline; text-underline-offset:2px;
  transition:opacity .12s;
}
.toast .undo:hover{opacity:1}
.toast .close{
  background:none; border:none;
  color:var(--bg); opacity:.5; cursor:pointer;
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; font-size:14px; line-height:1;
}
.toast .close:hover{opacity:1; background:color-mix(in srgb, var(--bg) 15%, transparent)}
.toast .progress{
  /* [v1082] Barre violette progress plus visible (3px + accent solide) */
  position:absolute; left:0; bottom:0; height:3px;
  background:var(--accent);
  width:100%; transform-origin:left;
  animation:drain 8s linear forwards;
}
@keyframes drain{to{transform:scaleX(0)}}

/* Code blocks */

.code-hint .k{color:var(--accent)}

/* Responsive */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidenav{position:static; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
  .sidenav .nav-label{display:none}
  .sidenav a{border-left:none; border-bottom:2px solid transparent; padding:6px 10px}
  .sidenav a.active{border-bottom-color:var(--accent); border-left-color:transparent}
  
  
  .sk-dash{grid-template-columns:1fr}
  .sk-fiche .kpis{grid-template-columns:repeat(2,1fr)}
  .sk-list-row{grid-template-columns:32px 1fr 60px; gap:10px; padding:12px}
  .sk-list-row .hide-mob{display:none}
  
  .section-hd .why{text-align:left}
  
  .pattern-hd .note{text-align:left}
  .nores{flex-direction:column; text-align:center}
  .nores .actions{margin-left:0}
}