/* Applications : l'espace des apps (à la place du fil), leurs tuiles et leurs icônes, les fenêtres
   d'action, et le panneau plein écran d'une app ouverte. Mêmes variables, fonds et boutons que le
   reste de l'interface (style.css). */

/* --- Icône d'une app : pictogramme blanc sur sa couleur (--icon-c, posée par apps.js), dans un
   carré aux coins très arrondis, avec un léger dégradé, comme sur un écran d'accueil. --- */
.app-squircle {
  --icon-c: #475569;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 27%;
  color: #fff;
  background:
    radial-gradient(130% 80% at 30% 0%, rgb(255 255 255 / .26), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--icon-c) 80%, #fff), var(--icon-c) 52%, color-mix(in srgb, var(--icon-c) 84%, #000));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .16), 0 6px 14px -4px color-mix(in srgb, var(--icon-c) 45%, transparent);
  transition: transform .12s ease;
}
.app-squircle svg { width: 50%; height: 50%; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .18)); }
.app-squircle.small { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .14); }
.app-squircle.small svg { width: 56%; height: 56%; }
.app-squircle.large { width: 88px; height: 88px; }

/* --- L'espace Applications, à la place du fil et de la zone de saisie --- */
/* Les bulles des agents (agents.css) restent : leurs messages et validations ne se cachent pas. */
.app.apps-open .chat > :not(.topbar, .apps-home, .agent-bubbles) { display: none !important; }
.app.files-open .chat > :not(.topbar, .files-home, .agent-bubbles) { display: none !important; }
.files-home .crumbs { margin: -4px -8px 0; }
.files-home #new-folder { width: 40px; height: 40px; border-radius: 999px; background: var(--bg2); }
.side-link[aria-current="page"] { background: var(--conv-active); }
.apps-home {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 32px max(24px, calc((100% - 1000px) / 2)) 40px;
}
.apps-home[hidden] { display: none; }
.apps-head { display: grid; gap: 14px; }
.apps-title { margin: 0; font-size: 26px; line-height: 40px; font-weight: 600; outline: none; }
.apps-tools { display: flex; gap: 10px; }
.apps-search {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 16px 0 40px;
  border-radius: 999px;
  background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 17px;
}
.apps-sort { flex: none; }
.apps-sort .select-button { height: 40px; padding: 0 14px; border-radius: 999px; }
.apps-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px -4px; padding: 2px 4px; }
.apps-cats[hidden] { display: none; }
.apps-cats::-webkit-scrollbar { display: none; }
.apps-cat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t1) 6%, transparent);
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
}
.apps-cat:hover { background: color-mix(in srgb, var(--t1) 10%, transparent); }
.apps-cat-n { font-size: 12px; color: var(--t2); }
.apps-cat[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.apps-cat[aria-pressed="true"] .apps-cat-n { color: color-mix(in srgb, var(--accent-fg) 65%, transparent); }
.apps-shelf { display: grid; gap: 12px; }
.apps-shelf[hidden] { display: none; }
.apps-shelf-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--t2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.apps-empty { margin: 0; font-size: 14px; color: var(--t2); }
.apps-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--t2); text-align: center; }

/* Tuiles : l'icône, le nom dessous sur deux lignes au plus. */
.app-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 16px 8px;
}
.app-tile { position: relative; min-width: 0; }
.app-tile-open {
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 12px 6px 10px;
  border-radius: 18px;
  background: none;
  color: var(--t1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.app-tile-open:hover, .app-tile.menu-open .app-tile-open { background: color-mix(in srgb, var(--t1) 5%, transparent); }
.app-tile-open:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }
.app-tile-open:active .app-squircle { transform: scale(.93); }
.app-tile-name {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* « ⋮ » au coin de l'icône, au survol ou au clavier ; sur écran tactile, l'appui long. */
.app-tile-more {
  position: absolute;
  top: 4px;
  left: calc(50% + 22px);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--t1);
  border: 1px solid var(--surface-border);
  box-shadow: 0 1px 4px rgb(0 0 0 / .14);
  opacity: 0;
  transition: opacity .15s;
}
.app-tile-more svg { width: 15px; height: 15px; }
.app-tile:hover .app-tile-more, .app-tile:focus-within .app-tile-more, .app-tile.menu-open .app-tile-more { opacity: 1; }
@media (hover: none) { .app-tile-more { display: none; } }
/* Apps épinglées dans la barre latérale, sous « Applications » (apps.js) : une ligne par app, comme
   les agents sous « Agents ». */
.side-apps { display: grid; gap: 2px; }
.side-apps:empty { display: none; }
.side-app { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px 0 9px; border-radius: 10px; background: none; color: var(--t1); font: normal 400 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; }
:where(.side-app):hover { background: color-mix(in srgb, var(--t1) 6%, transparent); }
.side-app.active { background: var(--conv-active); }
.app-squircle.side { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: none; } /* rond, comme le visage d'un agent */
.app-squircle.side svg { width: 60%; height: 60%; }
.side-app-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-share-text { margin: 0; }
.app-sheet-body input[readonly] { font-family: ui-monospace, monospace; font-size: 13px; }
/* Nouvelle app : une place libre, en pointillés. */
.app-squircle-new { background: none; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--t1) 24%, transparent); color: var(--t2); }
.app-squircle-new svg { width: 40%; height: 40%; filter: none; }
.app-tile-new:hover .app-squircle-new { color: var(--t1); border-color: color-mix(in srgb, var(--t1) 45%, transparent); }
.app-tile-new .app-tile-name { color: var(--t2); }

/* Menu d'une tuile : celui de Mes fichiers, placé par apps.js près de la tuile. */
.file-menu.app-menu { position: fixed; z-index: 30; right: auto; }

/* --- Fenêtre d'une action (renommer, icône et couleur, versions) --- */
dialog.app-sheet {
  width: min(560px, calc(100% - 32px));
  max-height: min(740px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--t1);
  box-shadow: var(--surface-shadow);
  overflow-y: auto;
}
dialog.app-sheet::backdrop { background: rgb(0 0 0 / .35); }
.app-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; background: var(--bg); }
.app-sheet-title { flex: 1; display: grid; min-width: 0; }
.app-sheet-title h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.app-sheet-title .app-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sheet-head .close { position: static; flex-shrink: 0; }
.app-sheet-body { display: grid; gap: 16px; padding: 4px 20px 20px; }
.app-sheet-actions { position: sticky; bottom: 0; margin: 0 -20px -20px; padding: 12px 20px 16px; background: var(--bg); border-top: 1px solid var(--line); }
.app-sheet .app-versions { gap: 2px; border-top: 0; padding-top: 4px; }

/* Sélecteur d'icône : aperçu, teintes, catégorie, pictogrammes. */
.icon-preview { display: grid; justify-items: center; gap: 8px; padding: 4px 0; }
.icon-preview .app-tile-name { font-size: 14px; font-weight: 500; }
.icon-field { display: grid; gap: 8px; font-size: 14px; color: var(--t2); }
.icon-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.icon-swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--icon-c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.icon-swatch:hover { background: var(--icon-c); transform: scale(1.08); }
.icon-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--icon-c); }
/* Autre couleur : une pastille cerclée de pointillés. */
.icon-custom { width: 32px; height: 32px; padding: 3px; border: 2px dashed color-mix(in srgb, var(--t1) 30%, transparent); border-radius: 50%; background: none; cursor: pointer; }
.icon-custom::-webkit-color-swatch-wrapper { padding: 0; }
.icon-custom::-webkit-color-swatch { border: 0; border-radius: 50%; }
.icon-custom::-moz-color-swatch { border: 0; border-radius: 50%; }
.icon-glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  max-height: 232px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg2);
}
.icon-glyph { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border-radius: 10px; background: none; color: var(--t1); }
.icon-glyph[hidden] { display: none; }
.icon-glyph svg { width: 22px; height: 22px; }
.icon-glyph:hover { background: color-mix(in srgb, var(--t1) 8%, transparent); }
.icon-glyph[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

/* Titre d'une app (carte du fil) et ligne grise. */
.app-title { display: grid; gap: 1px; min-width: 0; min-height: 36px; align-content: center; }
.app-name { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.app-meta { font-size: 12.5px; color: var(--t2); margin: 0; }

/* Historique des versions, dans sa fenêtre. */
.app-versions { display: grid; gap: 2px; }
.app-version { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 6px 2px; }
.app-version + .app-version { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.app-version-text { display: grid; gap: 1px; min-width: 0; }
.app-version-num { font-size: 13.5px; font-weight: 500; }
.app-version .app-meta { overflow-wrap: anywhere; }
.app-version-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.app-version-actions .link { padding: 0; font-size: 13px; }
.app-version-actions .pill-button { height: 28px; padding: 0 12px; font-size: 12.5px; }

/* Panneau plein écran d'une app ouverte : en-tête de Clik'Pilote, l'app dessous. */
dialog.app-view {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--t1);
}
dialog.app-view[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
dialog.app-view::backdrop { background: var(--bg); }
.app-view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.app-view-head .app-squircle.small { width: 32px; height: 32px; border-radius: 9px; }
.app-view-title { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.app-view-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-view-meta { font-size: 12.5px; color: var(--t2); }
.app-view-close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: var(--t2);
}
.app-view-close svg { width: 20px; height: 20px; }
.app-view-close:hover { background: var(--bg2); color: var(--t1); }
.app-view-body {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* Encoche sur le côté en paysage, barre d'accueil en bas : l'app n'y passe pas dessous. */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app-view-note { grid-row: 1 / -1; margin: 0; padding: 24px; place-self: center; text-align: center; color: var(--t2); font-size: 14px; }
.app-view-note.error { color: var(--error); }
.app-frame { grid-row: 2; display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }

/* Bandeau « L'app a rencontré une erreur », dessiné par Clik'Pilote au-dessus de l'app. */
.app-banner {
  grid-row: 1;
  display: grid;
  gap: 2px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--t1);
  background: color-mix(in srgb, var(--error) 12%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
}
.app-banner strong { color: var(--error); }
.app-banner-detail { overflow-wrap: anywhere; color: var(--t2); }
.app-banner summary { cursor: pointer; color: var(--t2); width: fit-content; }
.app-banner pre { margin: 6px 0 0; max-height: 160px; overflow: auto; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Message d'une app (ui.notify) : en bas, au nom de l'app. */
.app-toast {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  gap: 1px;
  max-width: min(480px, calc(100% - 32px));
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--t1);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: var(--surface-shadow);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.app-toast-from { font-size: 11.5px; color: var(--t2); }

/* Correction par l'IA, dans le bandeau d'erreur. */
.app-banner-fix { color: var(--t1); overflow-wrap: anywhere; }
.app-banner-button { justify-self: start; margin-top: 6px; height: 30px; padding: 0 14px; font-size: 13px; }

/* Carte d'une app créée ou modifiée par l'IA, dans le fil : icône, nom, version, Ouvrir. */
.app-chat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--raised);
  border: 1px solid color-mix(in srgb, var(--t1) 10%, transparent);
}
.app-chat-card .app-title { flex: 1; }
.app-chat-card .pill-button { flex-shrink: 0; }

/* Consentement aux outils d'une app, à la place de l'app tant qu'il n'est pas donné. */
.app-consent { grid-row: 1 / -1; align-self: start; justify-self: center; width: 100%; max-width: 620px; padding: 24px 16px; display: grid; gap: 12px; box-sizing: border-box; }
.app-consent h2 { margin: 0; font-size: 18px; }
.app-consent p { margin: 0; }
.app-consent-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.app-consent-list > li { padding: 12px 14px; border-radius: 12px; background: var(--bg2); display: grid; gap: 6px; min-width: 0; }
.app-consent-tool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.app-consent-actions { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.app-consent-actions li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow-wrap: anywhere; }
.tag.warn { color: var(--t1); }
.tag.warn::before { background: #d97706; }

/* Carte de validation d'un appel d'outil demandé par une app : boîte modale de Clik'Pilote,
   au-dessus du cadre de l'app. */
dialog.app-confirm {
  width: min(560px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100% - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--bg);
  color: var(--t1);
  box-shadow: 0 12px 40px rgb(0 0 0 / .35);
}
dialog.app-confirm .confirm { margin: 0; max-width: none; box-sizing: border-box; }
/* Refuser et Autoriser restent en bas de la boîte quand elle défile (petit écran, paysage, long
   message) : « Autoriser » est toujours atteignable. Sans effet tant que tout tient. */
dialog.app-confirm { overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 72px; } /* un élément atteint au clavier ne se cache pas sous les boutons */
dialog.app-confirm .confirm > .row { position: sticky; bottom: 0; margin: 0 -14px -14px; padding: 0 14px 14px; background: var(--bg2); }
/* Le texte qui passe sous les boutons s'efface juste au-dessus d'eux : on voit qu'il continue et
   qu'il faut faire défiler pour le lire. Le fondu tient dans l'écart de la grille (12 px) : rien ne
   change tant que tout tient. */
dialog.app-confirm .confirm > .row::before { content: ""; position: absolute; inset: auto 0 100%; height: 12px; background: linear-gradient(transparent, var(--bg2)); pointer-events: none; }
.card-from { font-size: 12.5px; color: var(--t2); }
/* La provenance (« Demandé par l'app … ») reste en haut de la boîte quand elle défile, en portrait
   comme en paysage : on voit toujours quelle app demande. Un seul défilement, celui de la boîte : le
   message et les détails techniques n'ont pas le leur dans la carte (un défilement dans un autre,
   qui faisait aussi défiler la boîte et sortir la provenance de l'écran). Fondu sous la provenance,
   comme au-dessus des boutons. */
dialog.app-confirm { scroll-padding-top: 40px; }
dialog.app-confirm .card-from { position: sticky; top: 0; z-index: 1; margin: -14px -14px 0; padding: 14px 14px 0; background: var(--bg2); }
dialog.app-confirm .card-from::after { content: ""; position: absolute; inset: 100% 0 auto; height: 12px; background: linear-gradient(var(--bg2), transparent); pointer-events: none; }
dialog.app-confirm dd, dialog.app-confirm .confirm-raw pre { max-height: none; overflow: visible; }
dialog.app-confirm .card-approve[aria-disabled="true"] { opacity: .5; cursor: default; }

/* Téléphone : le bouton menu flotte en haut à gauche, le titre se met à sa droite ; la grille a
   quatre colonnes comme un écran d'accueil (trois sur les très petits écrans) ; les fenêtres
   d'action montent du bas. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
  .apps-home { gap: 18px; padding: 10px max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .apps-title { padding-left: 52px; font-size: 22px; }
  .apps-sort { max-width: 42%; }
  .app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
  .app-squircle { width: 58px; height: 58px; }
  .app-tile-open { gap: 6px; padding: 6px 2px; border-radius: 14px; }
  .app-tile-name { font-size: 12px; }
  dialog.app-sheet {
    width: 100%;
    max-width: none;
    max-height: 90%;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    /* Barre d'accueil en bas ; encoche sur le côté en paysage (toute la largeur de l'écran). */
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}
@media (max-width: 360px) {
  .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Téléphone en paysage : peu de hauteur (moins encore avec le clavier), l'en-tête d'une app
   ouverte se réduit au nom et au bouton de fermeture. */
@media (orientation: landscape) and (max-height: 500px) {
  .app-view-head { gap: 8px; padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .app-view-head .app-squircle, .app-view-meta { display: none; }
}
/* Écran tactile (voir style.css) : fermer une app et « Ouvrir » une version, à la taille du doigt ;
   recherche et tri de Applications à 44 px ; le ✕ d'une fenêtre d'action garde son dessin, sa zone
   de toucher déborde autour. */
@media (pointer: coarse) {
  .app-view-close { width: 44px; height: 44px; margin: -4px -4px -4px 0; }
  .app-version-actions .link { padding-block: 12px; margin-block: -12px; }
  .apps-search, .apps-sort .select-button { height: 44px; }
  .app-sheet-head .close { position: relative; }
  .app-sheet-head .close::before { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
}

/* Les apps montrées dans le fil (appListCard) : une ligne par app, qui l'ouvre. */
.app-list-card { display: grid; padding: 6px; }
.app-list-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px; border-radius: 10px; background: none; color: var(--t1); text-align: left; }
:where(.app-list-row):hover { background: color-mix(in srgb, var(--t1) 5%, transparent); }
.app-list-row + .app-list-row { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 0; }
.app-list-text { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--t2); }
.app-list-text strong { font-size: 14.5px; font-weight: 600; color: var(--t1); }
.app-list-text small { font-size: 12px; }
/* Le menu d'une app se déplie depuis son bouton « … » (openAppMenu). */
.app-menu.pop { animation: app-menu-in .16s cubic-bezier(.2, .8, .2, 1); }
@keyframes app-menu-in { from { opacity: 0; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .app-menu.pop { animation: none; } }