@layer modules{
/* ════════ VISIONNEUSE DE PIÈCES JOINTES ════════
   Plein écran, un seul exemplaire dans la page. Elle affiche ce que le NAVIGATEUR sait
   rendre nativement (image, PDF, vidéo, audio) et ce que l'app sait déjà lire (texte,
   markdown, code, CSV en tableau). Tout le reste tombe sur un état honnête : on annonce
   qu'on ne sait pas afficher, et on propose le téléchargement. ── */

.dhv{position:fixed;inset:0;z-index:var(--z-popover);display:flex;flex-direction:column}
.dhv-bg{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(4px)}

/* En-tête : le nom du fichier, son format, et les deux seules actions qui comptent. */
.dhv-head{position:relative;z-index:1;display:flex;align-items:center;gap:var(--sp-10);
  padding:var(--sp-12) var(--sp-16);color:var(--on-solid)}
.dhv-name{font-size:var(--fs-md);font-weight:var(--fw-strong);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dhv-kind{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.06em;opacity:.65}
.dhv-sp{flex:1}
.dhv-btn{flex:0 0 auto;width:var(--sp-32);height:var(--sp-32);display:grid;place-items:center;
  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--on-solid);
  opacity:.7;cursor:pointer;transition:opacity .12s}
.dhv-btn:hover{opacity:1}
.dhv-btn svg{width:17px;height:17px;display:block}

/* Corps : une seule surface centrée, qui s'adapte au type. */
.dhv-body{position:relative;z-index:1;flex:1;min-height:0;display:flex;align-items:center;
  justify-content:center;padding:0 var(--sp-16) var(--sp-16)}
.dhv-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius);
  box-shadow:var(--elev-2);cursor:zoom-in}
.dhv-img.zoom{cursor:zoom-out;max-width:none;max-height:none}
.dhv-body.scroll{align-items:flex-start;overflow:auto}
.dhv-frame{width:100%;height:100%;border:0;border-radius:var(--radius);background:var(--card)}
.dhv-media{max-width:100%;max-height:100%;border-radius:var(--radius);background:#000}
/* Attente du rendu d'une page distante : posée SUR le cadre, retirée à son premier rendu. */
.dhv-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:var(--fs-sm);color:var(--mut);background:var(--card);border:1px solid var(--line2);
  border-radius:var(--radius-pill);padding:var(--sp-6) var(--sp-16);pointer-events:none}
.dhv-audio{width:min(560px,90vw);background:var(--card);border-radius:var(--radius);padding:var(--sp-10)}

/* Texte, code, markdown : la surface du document, pas le fond du panneau. */
.dhv-doc{width:min(900px,100%);max-height:100%;overflow:auto;background:var(--card);
  border-radius:var(--radius);padding:var(--sp-20) var(--sp-24);color:var(--txt);
  font-size:var(--fs-md);line-height:var(--lh-normal)}
.dhv-doc pre{margin:0;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.55;
  white-space:pre-wrap;word-break:break-word}
.dhv-doc table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.dhv-doc th,.dhv-doc td{border:1px solid var(--line2);padding:var(--sp-4) var(--sp-8);text-align:left;
  vertical-align:top;white-space:nowrap}
.dhv-doc thead th{background:var(--card2);font-weight:var(--fw-strong);position:sticky;top:0}
.dhv-doc tbody tr:nth-child(even){background:color-mix(in srgb,var(--txt) 3%,transparent)}

/* Format non affichable : on le dit, on ne fait pas semblant. */
.dhv-none{display:flex;flex-direction:column;align-items:center;gap:var(--sp-10);
  color:var(--on-solid);text-align:center;max-width:420px}
.dhv-none-t{font-size:var(--fs-lg);font-weight:var(--fw-strong)}
.dhv-none-d{font-size:var(--fs-sm);opacity:.75;line-height:var(--lh-normal)}
.dhv-none-a{margin-top:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-strong);
  padding:var(--sp-6) var(--sp-16);border-radius:var(--radius-sm);border:0;
  background:var(--accent);color:var(--on-solid);cursor:pointer}
.dhv-none-a:hover{background:var(--accent-h)}

/* Les pièces jointes deviennent cliquables : elles s'annoncent comme telles. */
.bchip.openable,.cw-att-chip.openable{cursor:pointer}
.bchip.openable:hover,.cw-att-chip.openable:hover{border-color:var(--accent)}
}