/* Palette de commandes (Ctrl/Cmd+K) et feuille des raccourcis. Cible : maquettes/01-liste-ao.html. */
.cmdk {
    width: min(40rem, calc(100vw - 2rem)); margin: 12vh auto auto; padding: 0; overflow: hidden;
    background: var(--bg-elevated); color: var(--text);
    border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.cmdk[open] { display: flex; flex-direction: column; animation: rao-pop var(--duration-fast) var(--ease); }
.cmdk::backdrop { background: var(--bg-overlay); }
.cmdk { --touch: 2.75rem; }
.cmdk-bar { display: flex; align-items: center; border-bottom: var(--border-width) solid var(--border); }
.cmdk-input {
    width: 100%; height: 3rem; padding: 0 var(--space-4); border: 0; border-bottom: var(--border-width) solid var(--border);
    background: transparent; color: var(--text); font-size: var(--text-lg);
}
.cmdk-bar .cmdk-input { border-bottom: 0; flex: 1; min-width: 0; }
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--focus-ring); }
.cmdk-close {
    display: none; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--space-3); flex: none;
    background: transparent; border: 0; color: var(--text-2); font-size: var(--text-sm); cursor: pointer;
}
.cmdk-list {
    max-height: min(60vh, 26rem); overflow-y: auto; padding: var(--space-2) var(--space-2) var(--space-3); margin: 0; list-style: none;
    scroll-padding: var(--space-2); overscroll-behavior: contain;
    /* Indicateurs de défilement : ombre en haut / en bas, visible seulement si du contenu reste caché */
    background:
        linear-gradient(var(--bg-elevated) 30%, transparent) top / 100% 1.5rem no-repeat local,
        linear-gradient(transparent, var(--bg-elevated) 70%) bottom / 100% 1.5rem no-repeat local,
        linear-gradient(color-mix(in srgb, var(--text) 18%, transparent), transparent) top / 100% 0.5rem no-repeat scroll,
        linear-gradient(transparent, color-mix(in srgb, var(--text) 18%, transparent)) bottom / 100% 0.5rem no-repeat scroll;
}
.cmdk-group { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-3); }
.cmdk-item { display: flex; align-items: center; gap: var(--space-3); min-height: 2.25rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.cmdk-item[aria-selected="true"] { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--focus-ring); }
.cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .cmdk-meta { margin-left: auto; display: inline-flex; gap: var(--space-1); color: var(--text-2); font-size: var(--text-xs); }
.cmdk-item mark { background: none; color: inherit; font-weight: var(--weight-semibold); }
.cmdk-sub { color: var(--text-2); font-size: var(--text-xs); margin-left: var(--space-2); }
.cmdk-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-2); }
.cmdk-footer { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: var(--border-width) solid var(--border); font-size: var(--text-xs); color: var(--text-2); }
.cmdk-status {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cmdk .kbd, .shortcuts-sheet .kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1);
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1;
    color: var(--text-2); background: var(--bg-muted); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
}
.cmdk-footer .kbd { margin-right: var(--space-1); }

/* Feuille d'aide des raccourcis */
.shortcuts-sheet {
    width: min(28rem, calc(100vw - 2rem)); margin: 12vh auto auto; padding: var(--space-4);
    background: var(--bg-elevated); color: var(--text);
    border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.shortcuts-sheet::backdrop { background: var(--bg-overlay); }
.shortcuts-sheet { --touch: 2.75rem; }
.shortcuts-sheet h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.shortcuts-sheet dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: center; }
.shortcuts-sheet dt { color: var(--text); }
.shortcuts-sheet dd { margin: 0; display: inline-flex; gap: var(--space-1); }
.shortcuts-sheet-close {
    margin-top: var(--space-4); min-height: var(--touch); padding: 0 var(--space-4); cursor: pointer;
    background: var(--bg); color: var(--text); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-md);
}

@media (max-width: 640px) {
    /* Feuille ancrée en bas : le voile reste visible au-dessus */
    .cmdk { width: 100vw; max-width: 100vw; height: calc(100dvh - 3rem); max-height: calc(100dvh - 3rem); margin: auto 0 0 0; border: 0; border-top: var(--border-width) solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .cmdk-list { max-height: none; flex: 1; }
    .cmdk-footer { display: none; }
    .cmdk-close { display: inline-flex; margin-right: var(--space-2); }
    .cmdk-input { font-size: 1rem; }
}
@media (pointer: coarse) {
    .cmdk-item { min-height: var(--touch); }
}