/* =========================================================================
   AEGIS — Page Commandes (documentation)
   ========================================================================= */

.cmd-toolbar {
  position: sticky;
  top: calc(var(--nav-h) + var(--banner-h, 0px));
  z-index: 40;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  padding-block: 16px;
}
.cmd-toolbar__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.cmd-search {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.cmd-search svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-tertiary); pointer-events: none;
}
.cmd-search input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 46px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 0.98rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.cmd-search input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.cmd-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cmd-filter {
  height: 38px;
  padding-inline: 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.25s var(--ease-soft);
}
.cmd-filter:hover { border-color: var(--border-strong); color: var(--text); }
.cmd-filter.active { background: var(--text); color: #fff; border-color: var(--text); }

.cmd-count { color: var(--text-tertiary); font-size: 0.88rem; margin-top: 24px; }

/* Catégorie */
.cmd-cat { margin-top: 48px; scroll-margin-top: 140px; }
.cmd-cat__head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.cmd-cat__ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.cmd-cat__ic svg { width: 22px; height: 22px; }
.cmd-cat__head h2 { font-size: 1.7rem; letter-spacing: -0.03em; }
.cmd-cat__head p { color: var(--text-tertiary); font-size: 0.92rem; margin-top: 2px; }

/* Grille de commandes */
.cmd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.cmd-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.cmd-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }

.cmd-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cmd-name {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cmd-name .slash { color: var(--accent); }
.cmd-card__desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; margin-top: 10px; }

.cmd-usage {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.cmd-usage .req { color: var(--accent-strong); }
.cmd-usage .opt { color: var(--text-tertiary); }

.cmd-opts { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cmd-opt { display: flex; gap: 10px; align-items: baseline; font-size: 0.88rem; }
.cmd-opt__name {
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 500;
  flex-shrink: 0;
}
.cmd-opt__req { color: var(--accent); font-size: 0.7rem; font-weight: 700; }
.cmd-opt__desc { color: var(--text-secondary); }

.cmd-subs { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.cmd-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 500;
}

.cmd-card.hidden, .cmd-cat.hidden { display: none; }

.cmd-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
  display: none;
}
.cmd-empty.show { display: block; }
.cmd-empty svg { width: 48px; height: 48px; margin: 0 auto 16px; opacity: 0.4; }

/* Note d'accès */
.cmd-note {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid rgba(88, 101, 242, 0.18);
  color: var(--accent-strong);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 28px;
}
.cmd-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.cmd-note code { font-family: var(--font-mono); background: rgba(255,255,255,0.6); padding: 1px 6px; border-radius: 5px; }

@media (max-width: 720px) {
  .cmd-grid { grid-template-columns: 1fr; }
  .cmd-toolbar { top: var(--nav-h); }
}