/* La visionneuse : le cadre posé sur la vue Carte, son en-tête, ses quatre rendus, sa poignée et
   son plein écran. Copie de la maquette validée le 4 septembre 2026
   (`docs/maquettes/support/maquette.css`, partie « Visionneuse → destiné à css/visionneuse.css »),
   plus ce que le produit demande et qu'une page statique n'avait pas : les bornes du
   redimensionnement, le plein écran réel et la mention des lignes non affichées.
   Jetons du DS uniquement, à une exception écrite plus bas : le blanc du papier d'un document. */

/* Le cadre se pose sur la vue Carte : c'est elle qui lui sert de repère. */
.sb-contenu--carte { position: relative; }

/* Le cadre : une surface posée sur la carte, sans voile derrière — l'arbre reste visible autour,
   et c'est voulu : on n'a pas quitté la carte, on regarde un de ses documents. Il ne porte ni
   `padding` ni `gap` : l'en-tête et le corps portent les leurs. */
.sb-visionneuse {
  position: absolute; inset: 56px 168px; z-index: 20;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--ds-radius-surface);
  box-shadow: var(--shadow-3); overflow: hidden; resize: both;
  /* Bornes du redimensionnement : le cadre ne se réduit pas sous son en-tête et ne sort pas de la vue. */
  min-width: 360px; min-height: 200px; max-width: 100%; max-height: 100%;
}
/* Plein écran : le cadre prend toute la vue, perd son rayon et sa poignée. `data-plein` habille le
   même état pendant que le navigateur bascule ; `:fullscreen` est celui qui compte une fois basculé. */
.sb-visionneuse[data-plein="1"], .sb-visionneuse:fullscreen {
  inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  border-radius: 0; resize: none;
}
.sb-visionneuse:fullscreen { border: 0; }
.sb-visionneuse-tete { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.sb-visionneuse-tete .sb-doc-icone { display: flex; align-items: center; color: var(--text-3); }
/* Le nom peut rétrécir et se couper à la fin : `flex: 0 1 auto`. Poussant (`flex: 1 1 auto`), il
   sortirait la taille et les gestes du cadre sur un nom long. */
.sb-visionneuse-tete h2 { margin: 0; min-width: 0; flex: 0 1 auto; font: 700 14px/1.3 var(--font-sans); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-visionneuse-tete .sb-detail { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-visionneuse-tete .sb-fin { margin-left: auto; display: flex; align-items: center; gap: 2px; }
/* Les feuilles d'un classeur : des chips, sous l'en-tête, jamais des onglets dessinés. */
.sb-feuilles { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
/* Le corps : un palier creusé sous la surface, pour que le document se détache. */
.sb-visionneuse-corps { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; background: var(--bg-sunken, var(--surface-3)); display: flex; justify-content: center; }
.sb-visionneuse-corps[data-type="xlsx"], .sb-visionneuse-corps[data-type="csv"] { padding: 0; display: block; background: var(--surface-1); }
/* Un classeur garde la largeur de ses colonnes : le tableau ne s'étire pas sur le cadre, les
   valeurs restent à côté de leur en-tête, et la place qui reste reste vide, comme dans le fichier. */
.sb-visionneuse-corps[data-type="xlsx"] .ds-table, .sb-visionneuse-corps[data-type="csv"] .ds-table { width: auto; }
.sb-visionneuse-corps[data-type="xlsx"] .ds-table-wrap, .sb-visionneuse-corps[data-type="csv"] .ds-table-wrap { border: 0; border-radius: 0; }
/* L'en-tête d'un classeur est une donnée du fichier, pas un titre de l'outil : il s'affiche tel
   qu'il est écrit, sans capitales ni interlettrage ajoutés, et en encre 2 — l'encre 3 du DS tombe
   à 2,93:1 sur le palier de l'en-tête. Il reste collant : la colonne garde son nom au défilement. */
.sb-visionneuse-corps[data-type="xlsx"] .ds-table th, .sb-visionneuse-corps[data-type="csv"] .ds-table th {
  text-transform: none; letter-spacing: normal; padding: 6px 12px;
  font: 600 12px/1.35 var(--font-sans); color: var(--text-2);
}
/* Lignes de 28 à 32 px (règles d'interface) : le tableau d'un fichier se parcourt, il ne se lit
   pas ligne à ligne comme une liste de l'outil. */
.sb-visionneuse-corps[data-type="xlsx"] .ds-table td, .sb-visionneuse-corps[data-type="csv"] .ds-table td {
  padding: 6px 12px; font: 400 13px/1.3 var(--font-sans);
}
/* Une image : entière, jamais rognée, sur le palier creusé. */
.sb-visionneuse-corps img { max-width: 100%; max-height: 100%; object-fit: contain; align-self: center; border: 1px solid var(--border); background: var(--surface-1); }
/* Un PDF et une page HTML : leur propre cadre blanc, sur toute la place. Un document n'est pas
   habillé par le thème : le papier reste blanc en sombre comme en clair.
   Le papier d'un document, pas une couleur d'interface. Le design system
   n'a pas de jeton pour lui : ses blancs sont des ENCRES (--on-accent, --text-inverse), qui
   suivent le thème. Un fond de document qui suivrait le thème rendrait un PDF noir sur noir. */
.sb-visionneuse-corps iframe { width: 100%; height: 100%; border: 1px solid var(--border); background: #ffffff; }
/* Ce que le cadre n'a pas encore : « — », le temps de lire les octets. Un refus prend sa place. */
.sb-visionneuse-corps .sb-vide, .sb-visionneuse-corps .sb-refus { align-self: center; }
/* Ce que le tableau ne montre pas, dit sous lui, en chiffres tabulaires. */
.sb-tronque { flex: none; margin: 0; padding: 7px 12px; border-top: 1px solid var(--border-subtle); font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* La poignée de redimensionnement, en bas à droite, en encre 3 : elle désigne, elle ne décore pas.
   Elle laisse passer le clic : c'est le coin du cadre lui-même qui se saisit (`resize: both`).
   Chrome dessine la sienne au même endroit : elle est masquée, sans quoi les deux se superposent
   en un empilement de traits. Le coin reste saisissable, seul le glyphe du navigateur disparaît. */
.sb-visionneuse::-webkit-resizer { display: none; }
.sb-poignee { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }