/* ──────────────────────────────────────────────────────────────────────────────
   aqWindow — la fenêtre partagée du Nuage (coque + barre de titre).
   public/js/aqWindow.js (coque) et public/js/aqWindowBar.js (barre).

   Réglages validés (planche v2, 2026-10-10) : voile et flou LÉGERS pour qu'on
   reconnaisse le fond ; aucune carte dans la fenêtre (le contenu est posé sur
   son fond) ; barre monochrome de 56 px, ordre fixe ; fenêtre de lecture de
   820 px, variante large de 900 px ; sur téléphone, plein écran + poignée.

   Autonome : se charge aussi bien sur les pages de l'app (layouts/main.php)
   que sur home.php. Les jetons viennent de variables.css, avec repli.
   ────────────────────────────────────────────────────────────────────────────── */
.aqw-backdrop {
    --aqw-veil: rgba(0, 0, 0, .10);
    --aqw-blur: 4px;
    --aqw-radius: 20px;
    --aqw-bar-h: 56px;
    --aqw-pop: var(--color-surface, #fff);
    position: fixed;
    inset: 0;
    z-index: 9998;                       /* au-dessus de Modal (2500) et des aperçus, sous les toasts (9999) */
    /* La fenêtre ne dépend jamais de la police de la page hôte : public-about.php n'a ni app.css ni police de base
       (mesuré : le titre retombait en Times New Roman). */
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--aqw-veil);
    -webkit-backdrop-filter: blur(var(--aqw-blur));
    backdrop-filter: blur(var(--aqw-blur));
    opacity: 0;
    transition: opacity .25s ease;
}
:root[data-theme="dark"] .aqw-backdrop { --aqw-veil: rgba(0, 0, 0, .18); --aqw-pop: #2b2b2e; }
.aqw-backdrop.aqw-visible { opacity: 1; }
@media (display-mode: standalone) and (min-width: 641px) {
    .aqw-backdrop { padding-top: max(24px, env(safe-area-inset-top, 0px)); }
}

/* La fenêtre : c'est elle la « carte », il n'y en a pas d'autre dedans. */
.aqw {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(var(--aqw-w, 820px), 100%);
    height: min(var(--aqw-h, 90vh), 100%);
    background: var(--color-surface, #fff);
    color: var(--color-text, #1d1d1f);
    border-radius: var(--aqw-radius);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
    transform: scale(.94) translateY(16px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .25s ease;
}
.aqw-visible .aqw { transform: none; opacity: 1; }
.aqw--doc  { --aqw-w: 820px; }
.aqw--wide { --aqw-w: 900px; }
.aqw--dragging { transition: none; }
/* Plein écran : la MÊME fenêtre, agrandie — plus rien derrière, ni marge, ni arrondi. */
.aqw-backdrop--max { padding: 0; background: var(--color-surface, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; }
.aqw--max { --aqw-w: 100vw; --aqw-h: 100vh; border-radius: 0; box-shadow: none; }

/* Sentinelles de focus (aqWindow.js) : focalisables, invisibles, hors flux. */
.aqw-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); outline: none; }

/* ── Barre de titre : monochrome, ordre fixe, aucun filet ─────────────────── */
.aqw-grab { display: none; justify-content: center; padding: 8px 0 0; flex: none; touch-action: none; }
.aqw-grab i { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--color-text, #1d1d1f) 24%, transparent); }
.aqw-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--aqw-bar-h);
    padding: 0 12px 0 28px;
    touch-action: none;
}
.aqw-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.aqw-name { margin: 0; min-width: 0; display: flex; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--color-text, #1d1d1f); }
.aqw-name-start { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqw-name-end { flex: none; white-space: nowrap; }          /* l'extension ne se coupe jamais */
.aqw-count { flex: none; font-size: 12.5px; font-weight: 600; color: var(--color-text-tertiary, #aeaeb2); font-variant-numeric: tabular-nums; }
.aqw-tools { flex: none; display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.aqw-tools:empty { display: none; }

.aqw-ib {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary, #86868b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.aqw-ib:hover, .aqw-ib[aria-expanded="true"], .aqw-ib[aria-pressed="true"] { background: color-mix(in srgb, var(--color-text, #1d1d1f) 9%, transparent); color: var(--color-text, #1d1d1f); }
.aqw-ib svg { width: 19px; height: 19px; display: block; }
.aqw-act {
    flex: none;
    height: 32px;
    margin: 0 4px 0 2px;
    padding: 0 15px;
    border: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-text, #1d1d1f) 9%, transparent);
    color: var(--color-text, #1d1d1f);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.aqw-act:hover { background: color-mix(in srgb, var(--color-text, #1d1d1f) 14%, transparent); }
/* Le focus clavier se VOIT dans la barre (jamais retiré). */
.aqw-ib:focus-visible, .aqw-act:focus-visible, .aqw-menu button:focus-visible {
    outline: 2px solid var(--color-primary, #007aff);
    outline-offset: 2px;
}

/* ── Menu ⋯ ────────────────────────────────────────────────────────────────── */
.aqw-anchor { position: relative; flex: none; }
.aqw-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    right: -8px;
    min-width: 240px;
    padding: 8px;
    border-radius: 16px;
    background: var(--aqw-pop);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.aqw-menu[hidden] { display: none; }
.aqw-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--color-text, #1d1d1f);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
.aqw-menu button:hover, .aqw-menu button:focus-visible { background: color-mix(in srgb, var(--color-text, #1d1d1f) 7%, transparent); }
.aqw-menu button[disabled] { opacity: .45; cursor: default; }
.aqw-menu .aqw-mi-ico { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary, #86868b); }
.aqw-menu .aqw-mi-ico svg { width: 19px; height: 19px; }
.aqw-menu .aqw-mi-key { margin-left: auto; font-size: 11.5px; color: var(--color-text-tertiary, #aeaeb2); }
.aqw-menu .aqw-sep { height: 6px; }
.aqw-menu .aqw-danger, .aqw-menu .aqw-danger .aqw-mi-ico { color: var(--color-danger, #d70015); }
/* La question prend toute la ligne (mesuré : à côté des deux boutons elle se pliait sur quatre lignes), les boutons dessous, à droite. */
.aqw-menu .aqw-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 6px 6px 10px; font-size: 13.5px; }
.aqw-menu .aqw-confirm span { flex: 1 1 100%; min-width: 0; }
.aqw-menu .aqw-confirm button { width: auto; padding: 7px 12px; font-weight: 600; }
.aqw-menu .aqw-confirm button:first-of-type { margin-left: auto; }
.aqw-menu .aqw-confirm .aqw-danger-fill { background: var(--color-danger, #d70015); color: #fff; }

/* ── Corps et pied ────────────────────────────────────────────────────────── */
.aqw-body { flex: 1; min-height: 0; display: flex; position: relative; overflow: auto; }
.aqw-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--color-bg, #f5f5f7); }
.aqw-footer { flex: none; display: flex; gap: 8px; justify-content: flex-end; padding: 14px 28px; }
.aqw-footer[hidden] { display: none; }

/* ── Téléphone : pas de fenêtre, plein écran, poignée, glisser vers le bas pour fermer ── */
@media (max-width: 640px) {
    .aqw-backdrop { padding: 0; align-items: flex-end; }
    .aqw { width: 100%; height: 100%; max-height: 100%; border-radius: 0; box-shadow: none; transform: translateY(100%); opacity: 1; }
    .aqw-visible .aqw { transform: none; }
    .aqw-grab { display: flex; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
    .aqw-bar { height: 58px; padding-left: 20px; }
    .aqw-fs { display: none; }          /* déjà plein écran */
    .aqw-tools { display: none; }       /* zoom : au pincement ; pages : repère dans la marge du bas -- jamais dans la barre */
    .aqw-title { flex-direction: column; align-items: flex-start; gap: 1px; }   /* le compteur passe SOUS le nom */
    .aqw-title > * { max-width: 100%; }
    .aqw-count { font-size: 12px; }
    .aqw-footer { padding: 12px 18px; }
    .aqw-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .aqw-backdrop, .aqw { transition: none; }
}