canvasframework 0.5.63 → 0.5.65

package/components/PDFViewer.js

@@ -1,1068 +1,752 @@
 import Component from '../core/Component.js';
 
 /**
- * Lecteur PDF embarqué avec styles Material You et Cupertino.
- * Supporte : affichage multi-pages, zoom, navigation, miniature, recherche,
- * téléchargement, impression, plein-écran, rotation.
- *
- * Utilise PDF.js (CDN) pour le rendu. La lib est chargée automatiquement.
- *
- * @class
- * @extends Component
- * @property {string} platform - 'material' ou 'cupertino'
- * @property {string|Uint8Array|null} src - URL ou données binaires du PDF
- * @property {number} currentPage - Page courante (1-based)
- * @property {number} totalPages - Nombre total de pages
- * @property {number} scale - Niveau de zoom (1 = 100%)
- * @property {number} rotation - Rotation en degrés (0, 90, 180, 270)
- * @property {boolean} loading - Chargement en cours
- * @property {string|null} error - Message d'erreur
+ * Lecteur PDF dessiné sur Canvas.
+ * Utilise exclusivement le système d'événements du framework :
+ *   - onPress(x, y)  → appelé par checkComponentsAtPosition sur 'start' et 'end'
+ *   - onMove(x, y)   → appelé sur 'move'
+ * x, y sont en coordonnées monde (scrollOffset déjà soustrait par le framework).
  */
 class PDFViewer extends Component {
 
-  /**
-   * @param {CanvasFramework} framework
-   * @param {Object} [options={}]
-   * @param {string|Uint8Array} [options.src] - URL ou données binaires du PDF
-   * @param {number}  [options.initialPage=1] - Page initiale
-   * @param {number}  [options.initialScale=1.0] - Zoom initial
-   * @param {boolean} [options.showToolbar=true] - Afficher la toolbar
-   * @param {boolean} [options.showThumbnails=false] - Afficher le panneau miniatures
-   * @param {boolean} [options.allowDownload=true] - Bouton de téléchargement
-   * @param {boolean} [options.allowPrint=true] - Bouton d'impression
-   * @param {boolean} [options.allowFullscreen=true] - Bouton plein écran
-   * @param {boolean} [options.allowRotate=true] - Bouton rotation
-   * @param {boolean} [options.allowSearch=true] - Bouton recherche
-   * @param {number}  [options.minScale=0.25] - Zoom minimum
-   * @param {number}  [options.maxScale=5.0] - Zoom maximum
-   * @param {string}  [options.backgroundColor] - Fond global
-   * @param {string}  [options.primaryColor] - Couleur primaire (toolbar)
-   * @param {string}  [options.pageBackground='#FFFFFF'] - Fond page
-   * @param {Function} [options.onPageChange] - Callback(page, total)
-   * @param {Function} [options.onScaleChange] - Callback(scale)
-   * @param {Function} [options.onLoad] - Callback(totalPages) après chargement
-   * @param {Function} [options.onError] - Callback(errorMessage)
-   */
   constructor(framework, options = {}) {
     super(framework, options);
 
-    this.platform       = framework.platform;
-    this.src            = options.src || null;
-    this.currentPage    = options.initialPage || 1;
-    this.totalPages     = 0;
-    this.scale          = options.initialScale || 1.0;
-    this.rotation       = 0;
-    this.loading        = false;
-    this.error          = null;
-    this.showToolbar    = options.showToolbar !== false;
-    this.showThumbnails = options.showThumbnails || false;
-    this.allowDownload  = options.allowDownload !== false;
-    this.allowPrint     = options.allowPrint !== false;
-    this.allowFullscreen= options.allowFullscreen !== false;
-    this.allowRotate    = options.allowRotate !== false;
-    this.allowSearch    = options.allowSearch !== false;
-    this.minScale       = options.minScale || 0.25;
-    this.maxScale       = options.maxScale || 5.0;
-    this.backgroundColor= options.backgroundColor || null;
-    this.primaryColor   = options.primaryColor || null;
-    this.pageBackground = options.pageBackground || '#FFFFFF';
-
-    // Callbacks
+    this.platform        = framework.platform;
+    this.src             = options.src || null;
+    this.currentPage     = options.initialPage || 1;
+    this.totalPages      = 0;
+    this.scale           = options.initialScale || 1.0;
+    this.rotation        = 0;
+    this.loading         = false;
+    this.error           = null;
+
+    this.showToolbar     = options.showToolbar     !== false;
+    this.allowZoom       = options.allowZoom       !== false;
+    this.allowNavigation = options.allowNavigation !== false;
+    this.allowDownload   = options.allowDownload   !== false;
+    this.allowPrint      = options.allowPrint      !== false;
+    this.allowRotate     = options.allowRotate     !== false;
+    this.allowSearch     = options.allowSearch     !== false;
+    this.minScale        = options.minScale        || 0.25;
+    this.maxScale        = options.maxScale        || 5.0;
+    this.backgroundColor = options.backgroundColor || null;
+    this.primaryColor    = options.primaryColor    || null;
+    this.pageBackground  = options.pageBackground  || '#FFFFFF';
+
     this.onPageChange  = options.onPageChange  || (() => {});
     this.onScaleChange = options.onScaleChange || (() => {});
     this.onLoad        = options.onLoad        || (() => {});
     this.onErrorCb     = options.onError       || (() => {});
 
-    // État interne DOM
-    this._containerEl   = null;
-    this._toolbarEl     = null;
-    this._viewerEl      = null;
-    this._thumbsEl      = null;
-    this._searchBarEl   = null;
-    this._mounted       = false;
-    this._pdfDoc        = null;
-    this._pageCanvases  = {};
-    this._thumbCanvases = {};
-    this._renderTask    = null;
+    // Layout
+    this._toolbarHeight = this.showToolbar ? 52 : 0;
     this._searchOpen    = false;
     this._searchQuery   = '';
-    this._fullscreen    = false;
+    this._thumbsWidth   = 110;
 
-    this._toolbarHeight   = this.showToolbar    ? 52 : 0;
-    this._thumbsWidth     = this.showThumbnails ? 120 : 0;
+    // PDF state
+    this._pdfDoc      = null;
+    this._pageImages  = {};
+    this._thumbImages = {};
+
+    // Scroll interne du viewer
+    this._scrollY    = 0;
+    this._maxScrollY = 0;
+
+    // Drag interne (scroll des pages)
+    this._dragging        = false;
+    this._dragStartY      = 0;
+    this._dragStartScroll = 0;
+    this._pressX          = undefined;
+    this._pressY          = undefined;
+
+    // Hit areas — coordonnées MONDE (this.x + offset local)
+    this._tbButtons       = [];
+    this._pageInputRect   = null;
+    this._retryBtn        = null;
+    this._searchCloseRect = null;
+    this._hoveredBtn      = null;
+
+    // Spinner
+    this._spinAngle = 0;
+    this._spinRAF   = null;
 
     // Couleurs Material You 3
     this.m3Colors = {
       primary:          '#6750A4',
       onPrimary:        '#FFFFFF',
-      surface:          '#FFFBFE',
       surfaceVariant:   '#E7E0EC',
       onSurface:        '#1C1B1F',
       onSurfaceVariant: '#49454F',
       outline:          '#79747E',
       outlineVariant:   '#CAC4D0',
       error:            '#BA1A1A',
-      shadow:           '#00000040',
-      toolbarBg:        '#6750A4',
-      toolbarText:      '#FFFFFF',
       viewerBg:         '#F7F2FA',
       thumbsBg:         '#EFE9F4',
       thumbBorder:      '#CAC4D0',
       thumbActive:      '#6750A4',
-      pageBox:          '#FFFFFF',
-      pageShadow:       '#00000026',
+      pageShadow:       'rgba(0,0,0,0.15)',
     };
 
     // Couleurs Cupertino
     this.cupertinoColors = {
-      primary:     '#007AFF',
-      onPrimary:   '#FFFFFF',
-      surface:     '#FFFFFF',
-      error:       '#FF3B30',
-      toolbarBg:   '#F2F2F7',
-      toolbarText: '#000000',
-      toolbarBorder:'#C6C6C8',
-      viewerBg:    '#D1D1D6',
-      thumbsBg:    '#F2F2F7',
-      thumbBorder: '#C6C6C8',
-      thumbActive: '#007AFF',
-      pageBox:     '#FFFFFF',
-      pageShadow:  '#00000026',
+      primary:          '#007AFF',
+      onPrimary:        '#FFFFFF',
+      error:            '#FF3B30',
+      toolbarBorder:    '#C6C6C8',
+      viewerBg:         '#D1D1D6',
+      thumbsBg:         '#F2F2F7',
+      thumbBorder:      '#C6C6C8',
+      thumbActive:      '#007AFF',
+      pageShadow:       'rgba(0,0,0,0.15)',
+      onSurfaceVariant: '#8E8E93',
+      outlineVariant:   '#C6C6C8',
+      outline:          '#C6C6C8',
     };
-  }
 
-  get _colors() {
-    return this.platform === 'material' ? this.m3Colors : this.cupertinoColors;
+    this._startSpinner();
+    if (this.src) this._loadPDF(this.src);
   }
 
-  get _primary() {
-    return this.primaryColor || this._colors.primary;
-  }
+  // ─── Couleurs ────────────────────────────────────────────────────────────────
 
-  // ─── Chargement PDF.js ────────────────────────────────────────────────────────
+  get _colors()  { return this.platform === 'material' ? this.m3Colors : this.cupertinoColors; }
+  get _primary() { return this.primaryColor || this._colors.primary; }
+  get _isMat()   { return this.platform === 'material'; }
 
-  /**
-   * Charge PDF.js depuis CDN si non disponible
-   * @returns {Promise<Object>} pdfjsLib
-   * @private
-   */
-  async _loadPDFJS() {
-    if (window.pdfjsLib) return window.pdfjsLib;
+  // ─── Géométrie en coordonnées MONDE ──────────────────────────────────────────
 
-    return new Promise((resolve, reject) => {
-      const script = document.createElement('script');
-      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
-      script.onload = () => {
-        window.pdfjsLib.GlobalWorkerOptions.workerSrc =
-          'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-        resolve(window.pdfjsLib);
-      };
-      script.onerror = () => reject(new Error('Impossible de charger PDF.js'));
-      document.head.appendChild(script);
-    });
+  get _tbRect() {
+    return { x: this.x, y: this.y, w: this.width, h: this._toolbarHeight };
   }
-
-  // ─── Montage DOM ─────────────────────────────────────────────────────────────
-
-  /**
-   * Monte le composant DOM complet sur le canvas
-   * @private
-   */
-  _mount() {
-    if (this._mounted) return;
-    this._mounted = true;
-
-    const canvas   = this.framework.canvas;
-    const canvasRect = canvas.getBoundingClientRect();
-    const isMat    = this.platform === 'material';
-    const colors   = this._colors;
-
-    // Conteneur principal
-    this._containerEl = document.createElement('div');
-    this._containerEl.style.cssText = `
-      position: fixed;
-      left: ${canvasRect.left + this.x}px;
-      top: ${canvasRect.top + this.y}px;
-      width: ${this.width}px;
-      height: ${this.height}px;
-      display: flex;
-      flex-direction: column;
-      z-index: 1000;
-      overflow: hidden;
-      border-radius: ${isMat ? '4px' : '12px'};
-      background: ${this.backgroundColor || colors.viewerBg};
-      box-shadow: ${isMat ? '0 4px 16px ' + colors.shadow : '0 2px 12px ' + colors.pageShadow};
-      box-sizing: border-box;
-      font-family: ${isMat ? "'Roboto', sans-serif" : "-apple-system, BlinkMacSystemFont, sans-serif"};
-    `;
-
-    // Toolbar
-    if (this.showToolbar) {
-      this._toolbarEl = this._buildToolbar();
-      this._containerEl.appendChild(this._toolbarEl);
-    }
-
-    // Barre de recherche
-    this._searchBarEl = this._buildSearchBar();
-    this._containerEl.appendChild(this._searchBarEl);
-
-    // Corps principal (miniatures + visionneuse)
-    const body = document.createElement('div');
-    body.style.cssText = `
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-    `;
-
-    // Panneau miniatures
-    if (this.showThumbnails) {
-      this._thumbsEl = this._buildThumbnailsPanel();
-      body.appendChild(this._thumbsEl);
-    }
-
-    // Zone de visualisation
-    this._viewerEl = document.createElement('div');
-    this._viewerEl.style.cssText = `
-      flex: 1;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 16px;
-      gap: 12px;
-      background: ${colors.viewerBg};
-      box-sizing: border-box;
-      scroll-behavior: smooth;
-    `;
-
-    // Événements scroll → sync page courante
-    this._viewerEl.addEventListener('scroll', () => this._onViewerScroll());
-
-    // Zoom à la molette
-    this._viewerEl.addEventListener('wheel', (e) => {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault();
-        const delta = e.deltaY > 0 ? -0.1 : 0.1;
-        this._setScale(this.scale + delta);
+  get _sbRect() {
+    return { x: this.x, y: this.y + this._toolbarHeight, w: this.width, h: this._searchOpen ? 44 : 0 };
+  }
+  get _activeThumbsWidth() { return this.totalPages > 1 ? this._thumbsWidth : 0; }
+  get _viewerRect() {
+    const top = this._toolbarHeight + this._sbRect.h;
+    return {
+      x: this.x + this._activeThumbsWidth,
+      y: this.y + top,
+      w: this.width  - this._activeThumbsWidth,
+      h: this.height - top,
+    };
+  }
+  get _thumbRect() {
+    const top = this._toolbarHeight + this._sbRect.h;
+    return { x: this.x, y: this.y + top, w: this._thumbsWidth, h: this.height - top };
+  }
+
+  // ─── Événements framework ────────────────────────────────────────────────────
+  // Le framework (checkComponentsAtPosition) appelle :
+  //   onPress(x, y)  sur 'start' avec comp.pressed = true
+  //   onPress(x, y)  sur 'end'   avec comp.pressed = false  (via onClick fallback)
+  //   onMove(x, y)   sur 'move'
+  //
+  // ATTENTION : le framework appelle onPress sur 'start' ET onClick sur 'end'.
+  // On surcharge onClick pour le clic final, et onPress pour le press initial.
+
+  onPress(x, y) {
+    // Appelé sur 'start' — enregistrer la position initiale
+    this._pressX   = x;
+    this._pressY   = y;
+    this._dragging = false;
+    this._dragStartScroll = this._scrollY;
+  }
+
+  // onClick est appelé par le framework sur 'end' quand comp.pressed était true
+  // On le remplace ici pour recevoir les coordonnées via onPress qu'on a mémorisé.
+  // Mais le framework appelle onClick() sans args... On utilise donc une autre approche :
+  // on surcharge handleClick via _lastPressX/Y mémorisés dans onPress.
+
+  onMount() {
+    // Surcharger onClick pour intercepter le clic framework
+    // Le framework appelle comp.onClick() sans coordonnées sur 'end'.
+    // On utilise _pressX/_pressY mémorisés dans onPress.
+    this.onClick = () => {
+      if (!this._dragging && this._pressX !== undefined) {
+        this._handleClick(this._pressX, this._pressY);
       }
-    }, { passive: false });
-
-    body.appendChild(this._viewerEl);
-    this._containerEl.appendChild(body);
-    document.body.appendChild(this._containerEl);
-
-    // Charger le PDF si src fournie
-    if (this.src) this._loadPDF(this.src);
-    else this._renderEmptyState();
+      this._pressX   = undefined;
+      this._pressY   = undefined;
+      this._dragging = false;
+    };
   }
 
-  // ─── Toolbar ──────────────────────────────────────────────────────────────────
-
-  _buildToolbar() {
-    const isMat  = this.platform === 'material';
-    const colors = this._colors;
-
-    const toolbar = document.createElement('div');
-    toolbar.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: ${isMat ? 4 : 2}px;
-      padding: 0 ${isMat ? 12 : 8}px;
-      height: ${this._toolbarHeight}px;
-      background: ${this._primary};
-      color: ${colors.onPrimary};
-      flex-shrink: 0;
-      box-shadow: ${isMat ? '0 2px 4px rgba(0,0,0,0.2)' : 'none'};
-      border-bottom: ${isMat ? 'none' : `1px solid ${colors.toolbarBorder || '#C6C6C8'}`};
-      overflow: hidden;
-      user-select: none;
-      -webkit-user-select: none;
-    `;
-
-    // Titre / Nom de fichier
-    const title = document.createElement('span');
-    title.id = 'pdf_title';
-    title.style.cssText = `
-      flex: 1;
-      font-size: ${isMat ? 16 : 17}px;
-      font-weight: ${isMat ? '500' : '600'};
-      color: ${colors.onPrimary};
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-    title.textContent = typeof this.src === 'string'
-      ? this.src.split('/').pop() || 'Document.pdf'
-      : 'Document.pdf';
-    toolbar.appendChild(title);
-
-    // Groupe navigation
-    const navGroup = document.createElement('div');
-    navGroup.style.cssText = `display: flex; align-items: center; gap: 4px;`;
-
-    // Bouton page précédente
-    const btnPrev = this._makeToolbarBtn(this._svgChevron('left'), 'Page précédente');
-    btnPrev.id = 'pdf_btn_prev';
-    btnPrev.addEventListener('click', () => this.goToPreviousPage());
-
-    // Input page
-    this._pageInput = document.createElement('input');
-    this._pageInput.type = 'text';
-    this._pageInput.value = '1';
-    this._pageInput.style.cssText = `
-      width: 40px;
-      height: 28px;
-      text-align: center;
-      border: none;
-      border-radius: ${isMat ? 4 : 6}px;
-      background: rgba(255,255,255,0.2);
-      color: white;
-      font-size: 14px;
-      outline: none;
-    `;
-    this._pageInput.addEventListener('change', () => {
-      const p = parseInt(this._pageInput.value);
-      if (p >= 1 && p <= this.totalPages) this.goToPage(p);
-      else this._pageInput.value = this.currentPage;
-    });
-
-    this._pageTotalLabel = document.createElement('span');
-    this._pageTotalLabel.style.cssText = `font-size: 14px; color: rgba(255,255,255,0.8);`;
-    this._pageTotalLabel.textContent = '/ -';
-
-    // Bouton page suivante
-    const btnNext = this._makeToolbarBtn(this._svgChevron('right'), 'Page suivante');
-    btnNext.id = 'pdf_btn_next';
-    btnNext.addEventListener('click', () => this.goToNextPage());
-
-    navGroup.appendChild(btnPrev);
-    navGroup.appendChild(this._pageInput);
-    navGroup.appendChild(this._pageTotalLabel);
-    navGroup.appendChild(btnNext);
-    toolbar.appendChild(navGroup);
-
-    // Séparateur
-    toolbar.appendChild(this._makeSep());
-
-    // Zoom
-    const zoomGroup = document.createElement('div');
-    zoomGroup.style.cssText = `display: flex; align-items: center; gap: 4px;`;
-
-    const btnZoomOut = this._makeToolbarBtn('−', 'Dézoomer');
-    btnZoomOut.style.fontSize = '20px';
-    btnZoomOut.addEventListener('click', () => this._setScale(this.scale - 0.25));
-
-    this._scaleLabel = document.createElement('span');
-    this._scaleLabel.style.cssText = `
-      font-size: 13px; color: rgba(255,255,255,0.9);
-      min-width: 40px; text-align: center;
-    `;
-    this._scaleLabel.textContent = '100%';
-
-    const btnZoomIn = this._makeToolbarBtn('+', 'Zoomer');
-    btnZoomIn.style.fontSize = '20px';
-    btnZoomIn.addEventListener('click', () => this._setScale(this.scale + 0.25));
-
-    // Bouton zoom automatique
-    const btnZoomFit = this._makeToolbarBtn(this._svgFit(), 'Ajuster à la page');
-    btnZoomFit.addEventListener('click', () => this._fitToWidth());
-
-    zoomGroup.appendChild(btnZoomOut);
-    zoomGroup.appendChild(this._scaleLabel);
-    zoomGroup.appendChild(btnZoomIn);
-    zoomGroup.appendChild(btnZoomFit);
-    toolbar.appendChild(zoomGroup);
-
-    // Outils supplémentaires
-    if (this.allowRotate || this.allowSearch || this.allowDownload || this.allowPrint || this.allowFullscreen) {
-      toolbar.appendChild(this._makeSep());
+  onMove(x, y) {
+    this._checkHover(x, y);
+
+    // Drag interne du viewer si le press initial était dans le viewer
+    if (this._pressX !== undefined) {
+      const vr = this._viewerRect;
+      const inViewer = this._pressX >= vr.x && this._pressX <= vr.x + vr.w &&
+                       this._pressY >= vr.y && this._pressY <= vr.y + vr.h;
+      if (inViewer) {
+        const dy = Math.abs(y - this._pressY);
+        if (dy > 5 || this._dragging) {
+          if (!this._dragging) {
+            this._dragging        = true;
+            this._dragStartY      = this._pressY;
+            this._dragStartScroll = this._scrollY;
+          }
+          this._scrollY = Math.max(0, Math.min(this._maxScrollY,
+            this._dragStartScroll + (this._dragStartY - y)));
+          this._syncPage();
+          this.markDirty();
+        }
+      }
     }
+  }
 
-    if (this.allowRotate) {
-      const btnRotate = this._makeToolbarBtn(this._svgRotate(), 'Rotation 90°');
-      btnRotate.addEventListener('click', () => this._rotate());
-      toolbar.appendChild(btnRotate);
-    }
+  // ─── Logique de clic ─────────────────────────────────────────────────────────
 
-    if (this.allowSearch) {
-      const btnSearch = this._makeToolbarBtn(this._svgSearch(), 'Rechercher');
-      btnSearch.addEventListener('click', () => this._toggleSearch());
-      toolbar.appendChild(btnSearch);
+  _handleClick(x, y) {
+    // Retry
+    if (this._retryBtn) {
+      const r = this._retryBtn;
+      if (x >= r.x && x <= r.x+r.w && y >= r.y && y <= r.y+r.h) {
+        if (this.src) this._loadPDF(this.src); return;
+      }
     }
 
-    if (this.allowDownload) {
-      const btnDl = this._makeToolbarBtn(this._svgDownload(), 'Télécharger');
-      btnDl.addEventListener('click', () => this._download());
-      toolbar.appendChild(btnDl);
+    // Fermer recherche
+    if (this._searchCloseRect) {
+      const r = this._searchCloseRect;
+      if (x >= r.x && x <= r.x+r.w && y >= r.y && y <= r.y+r.h) {
+        this._toggleSearch(); return;
+      }
     }
 
-    if (this.allowPrint) {
-      const btnPrint = this._makeToolbarBtn(this._svgPrint(), 'Imprimer');
-      btnPrint.addEventListener('click', () => this._print());
-      toolbar.appendChild(btnPrint);
+    // Boutons toolbar
+    for (const b of this._tbButtons) {
+      if (!b.disabled && x >= b.x && x <= b.x+b.w && y >= b.y && y <= b.y+b.h) {
+        this._handleBtn(b.id); return;
+      }
     }
 
-    if (this.allowFullscreen) {
-      const btnFs = this._makeToolbarBtn(this._svgFullscreen(), 'Plein écran');
-      btnFs.addEventListener('click', () => this._toggleFullscreen());
-      toolbar.appendChild(btnFs);
+    // Indicateur de page
+    if (this._pageInputRect) {
+      const r = this._pageInputRect;
+      if (x >= r.x && x <= r.x+r.w && y >= r.y && y <= r.y+r.h) {
+        this._promptPage(); return;
+      }
     }
 
-    return toolbar;
+    // Miniatures
+    if (this.totalPages > 1) {
+      const tr = this._thumbRect;
+      if (x >= tr.x && x <= tr.x+tr.w && y >= tr.y && y <= tr.y+tr.h) {
+        let ty = tr.y + 8;
+        for (let p = 1; p <= this.totalPages; p++) {
+          const img = this._thumbImages[p];
+          const tw  = tr.w - 16;
+          const th  = img ? Math.round(img.height * tw / img.width) : 70;
+          if (y >= ty && y <= ty + th) { this.goToPage(p); return; }
+          ty += th + 18;
+        }
+      }
+    }
   }
 
-  _makeToolbarBtn(content, title) {
-    const btn = document.createElement('button');
-    btn.innerHTML = content;
-    btn.title = title;
-    btn.style.cssText = `
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 34px;
-      height: 34px;
-      border: none;
-      border-radius: ${this.platform === 'material' ? 4 : 6}px;
-      background: transparent;
-      color: white;
-      cursor: pointer;
-      padding: 0;
-      transition: background 0.15s;
-      flex-shrink: 0;
-    `;
-    btn.addEventListener('mouseenter', () => btn.style.background = 'rgba(255,255,255,0.2)');
-    btn.addEventListener('mouseleave', () => btn.style.background = 'transparent');
-    return btn;
+  _checkHover(x, y) {
+    let hover = null;
+    for (const b of this._tbButtons) {
+      if (!b.disabled && x >= b.x && x <= b.x+b.w && y >= b.y && y <= b.y+b.h) {
+        hover = b.id; break;
+      }
+    }
+    if (!hover && this._searchCloseRect) {
+      const r = this._searchCloseRect;
+      if (x >= r.x && x <= r.x+r.w && y >= r.y && y <= r.y+r.h) hover = 'searchClose';
+    }
+    if (!hover && this._retryBtn) {
+      const r = this._retryBtn;
+      if (x >= r.x && x <= r.x+r.w && y >= r.y && y <= r.y+r.h) hover = 'retry';
+    }
+    if (hover !== this._hoveredBtn) { this._hoveredBtn = hover; this.markDirty(); }
   }
 
-  _makeSep() {
-    const sep = document.createElement('div');
-    sep.style.cssText = `width:1px; height:24px; background:rgba(255,255,255,0.3); margin:0 4px; flex-shrink:0;`;
-    return sep;
-  }
+  // ─── Spinner ─────────────────────────────────────────────────────────────────
 
-  // ─── Barre de recherche ───────────────────────────────────────────────────────
-
-  _buildSearchBar() {
-    const isMat = this.platform === 'material';
-    const bar = document.createElement('div');
-    bar.style.cssText = `
-      display: none;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: ${isMat ? this.m3Colors.surfaceVariant : '#F2F2F7'};
-      border-bottom: 1px solid ${isMat ? this.m3Colors.outlineVariant : '#C6C6C8'};
-      flex-shrink: 0;
-    `;
-
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.placeholder = 'Rechercher dans le document...';
-    input.style.cssText = `
-      flex: 1;
-      border: 1px solid ${isMat ? this.m3Colors.outline : '#C6C6C8'};
-      border-radius: ${isMat ? 4 : 8}px;
-      padding: 6px 10px;
-      font-size: 14px;
-      outline: none;
-      background: white;
-    `;
-
-    const btnClose = document.createElement('button');
-    btnClose.innerHTML = '✕';
-    btnClose.style.cssText = `
-      border: none; background: transparent; cursor: pointer;
-      font-size: 16px; color: ${isMat ? this.m3Colors.onSurfaceVariant : '#8E8E93'};
-    `;
-    btnClose.addEventListener('click', () => this._toggleSearch());
-
-    bar.appendChild(input);
-    bar.appendChild(btnClose);
-    this._searchInput = input;
-    return bar;
+  _startSpinner() {
+    const tick = () => {
+      if (this.loading) { this._spinAngle = (this._spinAngle + 0.08) % (Math.PI * 2); this.markDirty(); }
+      this._spinRAF = requestAnimationFrame(tick);
+    };
+    this._spinRAF = requestAnimationFrame(tick);
   }
 
-  _toggleSearch() {
-    this._searchOpen = !this._searchOpen;
-    this._searchBarEl.style.display = this._searchOpen ? 'flex' : 'none';
-    if (this._searchOpen) this._searchInput.focus();
-  }
+  // ─── PDF.js ──────────────────────────────────────────────────────────────────
 
-  // ─── Panneau miniatures ───────────────────────────────────────────────────────
-
-  _buildThumbnailsPanel() {
-    const isMat = this.platform === 'material';
-    const panel = document.createElement('div');
-    panel.style.cssText = `
-      width: ${this._thumbsWidth}px;
-      height: 100%;
-      overflow-y: auto;
-      background: ${this._colors.thumbsBg};
-      border-right: 1px solid ${this._colors.thumbBorder};
-      padding: 8px;
-      box-sizing: border-box;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      align-items: center;
-      scrollbar-width: thin;
-    `;
-    return panel;
+  async _loadPDFJS() {
+    if (window.pdfjsLib) return window.pdfjsLib;
+    return new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
+      s.onload = () => {
+        window.pdfjsLib.GlobalWorkerOptions.workerSrc =
+          'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+        resolve(window.pdfjsLib);
+      };
+      s.onerror = () => reject(new Error('Impossible de charger PDF.js'));
+      document.head.appendChild(s);
+    });
   }
 
-  // ─── Chargement PDF ───────────────────────────────────────────────────────────
-
-  /**
-   * Charge et affiche un PDF
-   * @param {string|Uint8Array} src
-   */
   async _loadPDF(src) {
-    this.loading = true;
-    this.error   = null;
-    this._renderLoadingState();
-
+    this.loading = true; this.error = null;
+    this._pageImages = {}; this._thumbImages = {}; this._scrollY = 0;
+    this.markDirty();
     try {
-      const pdfjsLib = await this._loadPDFJS();
-      const loadingTask = pdfjsLib.getDocument(
-        typeof src === 'string' ? src : { data: src }
-      );
-      this._pdfDoc = await loadingTask.promise;
-      this.totalPages  = this._pdfDoc.numPages;
-      this.loading     = false;
-
-      // Met à jour toolbar
-      if (this._pageTotalLabel) this._pageTotalLabel.textContent = `/ ${this.totalPages}`;
-
-      // Met à jour le titre si URL
-      if (typeof src === 'string' && this._containerEl) {
-        const t = this._containerEl.querySelector('#pdf_title');
-        if (t) t.textContent = src.split('/').pop();
-      }
-
-      // Vide la visionneuse
-      this._viewerEl.innerHTML = '';
-
-      // Rend toutes les pages
+      const lib  = await this._loadPDFJS();
+      const task = lib.getDocument(typeof src === 'string' ? src : { data: src });
+      this._pdfDoc    = await task.promise;
+      this.totalPages = this._pdfDoc.numPages;
+      const promises  = [];
       for (let p = 1; p <= this.totalPages; p++) {
-        await this._renderPage(p);
-        if (this.showThumbnails) await this._renderThumbnail(p);
+        promises.push(this._renderPage(p), this._renderThumb(p));
       }
-
-      // Aller à la page initiale
-      this.scrollToPage(this.currentPage);
+      await Promise.all(promises);
+      this.loading = false;
+      this._computeMaxScroll();
       this.onLoad(this.totalPages);
-
+      this.markDirty();
     } catch (err) {
       this.loading = false;
-      this.error   = err.message || 'Erreur lors du chargement du PDF';
-      this._renderErrorState();
+      this.error   = err.message || 'Erreur de chargement';
       this.onErrorCb(this.error);
+      this.markDirty();
     }
   }
 
-  /**
-   * Rend une page PDF dans la zone de visualisation
-   * @param {number} pageNum
-   * @private
-   */
-  async _renderPage(pageNum) {
-    const page     = await this._pdfDoc.getPage(pageNum);
-    const viewport = page.getViewport({ scale: this.scale, rotation: this.rotation });
-
-    // Wrapper de page
-    const pageWrapper = document.createElement('div');
-    pageWrapper.id = `pdf_page_${pageNum}`;
-    pageWrapper.dataset.page = pageNum;
-    pageWrapper.style.cssText = `
-      position: relative;
-      box-shadow: 0 2px 8px ${this._colors.pageShadow};
-      flex-shrink: 0;
-      background: ${this.pageBackground};
-      line-height: 0;
-    `;
-
-    const pageCanvas = document.createElement('canvas');
-    pageCanvas.width  = viewport.width;
-    pageCanvas.height = viewport.height;
-    pageCanvas.style.cssText = `display: block; max-width: 100%;`;
-
-    pageWrapper.appendChild(pageCanvas);
-
-    // Numéro de page (en bas)
-    const pageLabel = document.createElement('div');
-    pageLabel.style.cssText = `
-      position: absolute;
-      bottom: 6px;
-      right: 10px;
-      font-size: 11px;
-      color: #888;
-      line-height: 1;
-      pointer-events: none;
-    `;
-    pageLabel.textContent = `${pageNum} / ${this.totalPages}`;
-    pageWrapper.appendChild(pageLabel);
-
-    this._viewerEl.appendChild(pageWrapper);
-    this._pageCanvases[pageNum] = pageCanvas;
-
-    const ctx = pageCanvas.getContext('2d');
-    await page.render({ canvasContext: ctx, viewport }).promise;
+  async _renderPage(p) {
+    try {
+      const page = await this._pdfDoc.getPage(p);
+      const vp   = page.getViewport({ scale: this.scale, rotation: this.rotation });
+      const off  = new OffscreenCanvas(Math.ceil(vp.width), Math.ceil(vp.height));
+      await page.render({ canvasContext: off.getContext('2d'), viewport: vp }).promise;
+      this._pageImages[p] = await createImageBitmap(off);
+    } catch (err) { console.error(`Erreur page ${p}:`, err); }
   }
 
-  /**
-   * Rend une miniature de page
-   * @param {number} pageNum
-   * @private
-   */
-  async _renderThumbnail(pageNum) {
-    if (!this._thumbsEl) return;
-    const page     = await this._pdfDoc.getPage(pageNum);
-    const viewport = page.getViewport({ scale: 0.2 });
-
-    const thumbWrapper = document.createElement('div');
-    thumbWrapper.id = `pdf_thumb_${pageNum}`;
-    thumbWrapper.dataset.page = pageNum;
-    thumbWrapper.style.cssText = `
-      cursor: pointer;
-      border: 2px solid ${pageNum === this.currentPage ? this._colors.thumbActive : this._colors.thumbBorder};
-      border-radius: 4px;
-      overflow: hidden;
-      transition: border-color 0.2s;
-    `;
-    thumbWrapper.addEventListener('click', () => {
-      this.goToPage(pageNum);
-      this._highlightThumbnail(pageNum);
-    });
-
-    const thumbCanvas = document.createElement('canvas');
-    thumbCanvas.width  = viewport.width;
-    thumbCanvas.height = viewport.height;
-    thumbCanvas.style.cssText = `display: block; width: 100%;`;
-    thumbWrapper.appendChild(thumbCanvas);
-
-    const numLabel = document.createElement('div');
-    numLabel.style.cssText = `
-      text-align: center;
-      font-size: 10px;
-      color: #666;
-      padding: 2px;
-      background: white;
-    `;
-    numLabel.textContent = pageNum;
-    thumbWrapper.appendChild(numLabel);
-
-    this._thumbsEl.appendChild(thumbWrapper);
-    this._thumbCanvases[pageNum] = thumbWrapper;
-
-    const ctx = thumbCanvas.getContext('2d');
-    await page.render({ canvasContext: ctx, viewport }).promise;
+  async _renderThumb(p) {
+    try {
+      const page = await this._pdfDoc.getPage(p);
+      const vp   = page.getViewport({ scale: 0.18, rotation: this.rotation });
+      const off  = new OffscreenCanvas(Math.ceil(vp.width), Math.ceil(vp.height));
+      await page.render({ canvasContext: off.getContext('2d'), viewport: vp }).promise;
+      this._thumbImages[p] = await createImageBitmap(off);
+    } catch (err) { console.error(`Erreur miniature ${p}:`, err); }
   }
 
-  /**
-   * Met en surbrillance la miniature de la page active
-   * @param {number} pageNum
-   * @private
-   */
-  _highlightThumbnail(pageNum) {
-    if (!this._thumbsEl) return;
-    this._thumbsEl.querySelectorAll('[data-page]').forEach(el => {
-      el.style.borderColor = this._colors.thumbBorder;
-    });
-    const active = this._thumbsEl.querySelector(`#pdf_thumb_${pageNum}`);
-    if (active) active.style.borderColor = this._colors.thumbActive;
+  async _reRenderAll() {
+    if (!this._pdfDoc) return;
+    this._pageImages = {}; this._thumbImages = {};
+    this.loading = true; this.markDirty();
+    const promises = [];
+    for (let p = 1; p <= this.totalPages; p++) {
+      promises.push(this._renderPage(p), this._renderThumb(p));
+    }
+    await Promise.all(promises);
+    this.loading = false;
+    this._computeMaxScroll();
+    this._scrollY = Math.min(this._scrollY, this._maxScrollY);
+    this.markDirty();
   }
 
-  /**
-   * Détecte la page visible lors du scroll
-   * @private
-   */
-  _onViewerScroll() {
-    if (!this._viewerEl) return;
-    const scrollTop = this._viewerEl.scrollTop + this._viewerEl.clientHeight / 2;
-    let nearest = 1;
-    let nearestDist = Infinity;
-
-    this._viewerEl.querySelectorAll('[data-page]').forEach(el => {
-      const p    = parseInt(el.dataset.page);
-      const dist = Math.abs(el.offsetTop - scrollTop);
-      if (dist < nearestDist) { nearestDist = dist; nearest = p; }
-    });
+  // ─── Scroll interne ───────────────────────────────────────────────────────────
 
-    if (nearest !== this.currentPage) {
-      this.currentPage = nearest;
-      if (this._pageInput)    this._pageInput.value = nearest;
-      this.onPageChange(this.currentPage, this.totalPages);
-      this._highlightThumbnail(nearest);
+  _computeMaxScroll() {
+    const vr = this._viewerRect;
+    let total = 16;
+    for (let p = 1; p <= this.totalPages; p++) {
+      total += (this._pageImages[p] ? this._pageImages[p].height : 200) + 16;
     }
+    this._maxScrollY = Math.max(0, total - vr.h);
   }
 
-  // ─── États visuels (vide, chargement, erreur) ─────────────────────────────────
-
-  _renderEmptyState() {
-    this._viewerEl.innerHTML = '';
-    const wrap = document.createElement('div');
-    wrap.style.cssText = `
-      display: flex; flex-direction: column; align-items: center;
-      justify-content: center; height: 100%; gap: 16px; opacity: 0.5;
-    `;
-    wrap.innerHTML = `
-      <svg width="64" height="64" viewBox="0 0 24 24" fill="${this._colors.onSurfaceVariant || '#49454F'}">
-        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
-        <polyline points="14,2 14,8 20,8" fill="none" stroke="white" stroke-width="1.5"/>
-        <text x="7" y="19" font-size="5" fill="white" font-weight="bold">PDF</text>
-      </svg>
-      <p style="margin:0; font-size:15px; color:${this._colors.onSurfaceVariant || '#49454F'}">
-        Aucun document chargé
-      </p>
-    `;
-    this._viewerEl.appendChild(wrap);
+  _pageScrollOffset(pageNum) {
+    let y = 16;
+    for (let p = 1; p < pageNum; p++) {
+      y += (this._pageImages[p] ? this._pageImages[p].height : 200) + 16;
+    }
+    return y;
   }
 
-  _renderLoadingState() {
-    this._viewerEl.innerHTML = '';
-    const wrap = document.createElement('div');
-    wrap.style.cssText = `
-      display: flex; flex-direction: column; align-items: center;
-      justify-content: center; height: 100%; gap: 16px;
-    `;
-
-    const spinner = document.createElement('div');
-    spinner.style.cssText = `
-      width: 40px; height: 40px;
-      border: 4px solid ${this._colors.thumbBorder};
-      border-top-color: ${this._primary};
-      border-radius: 50%;
-      animation: pdf_spin 0.8s linear infinite;
-    `;
-
-    if (!document.querySelector('#pdf_spinner_style')) {
-      const s = document.createElement('style');
-      s.id = 'pdf_spinner_style';
-      s.textContent = `@keyframes pdf_spin { to { transform: rotate(360deg); } }`;
-      document.head.appendChild(s);
+  _syncPage() {
+    if (!this.totalPages) return;
+    const mid = this._scrollY + this._viewerRect.h / 2;
+    let y = 16;
+    for (let p = 1; p <= this.totalPages; p++) {
+      const h = this._pageImages[p] ? this._pageImages[p].height : 200;
+      if (mid <= y + h || p === this.totalPages) {
+        if (p !== this.currentPage) { this.currentPage = p; this.onPageChange(p, this.totalPages); }
+        return;
+      }
+      y += h + 16;
     }
+  }
 
-    const label = document.createElement('p');
-    label.style.cssText = `margin:0; font-size:15px; color:${this._colors.onSurfaceVariant || '#49454F'};`;
-    label.textContent = 'Chargement du document...';
+  // ─── Dessin ───────────────────────────────────────────────────────────────────
 
-    wrap.appendChild(spinner);
-    wrap.appendChild(label);
-    this._viewerEl.appendChild(wrap);
-  }
+  draw(ctx) {
+    ctx.save();
+    ctx.beginPath();
+    this._rr(ctx, this.x, this.y, this.width, this.height, this._isMat ? 4 : 12);
+    ctx.clip();
 
-  _renderErrorState() {
-    this._viewerEl.innerHTML = '';
-    const wrap = document.createElement('div');
-    wrap.style.cssText = `
-      display: flex; flex-direction: column; align-items: center;
-      justify-content: center; height: 100%; gap: 16px; padding: 24px;
-    `;
-    wrap.innerHTML = `
-      <svg width="48" height="48" viewBox="0 0 24 24" fill="${this._colors.error || '#BA1A1A'}">
-        <circle cx="12" cy="12" r="10"/>
-        <line x1="12" y1="8" x2="12" y2="12" stroke="white" stroke-width="2"/>
-        <circle cx="12" cy="16" r="1" fill="white"/>
-      </svg>
-      <p style="margin:0; font-size:15px; color:${this._colors.error || '#BA1A1A'}; text-align:center;">
-        ${this.error}
-      </p>
-    `;
-
-    // Bouton réessayer
-    const retryBtn = document.createElement('button');
-    retryBtn.textContent = 'Réessayer';
-    retryBtn.style.cssText = `
-      padding: 8px 20px;
-      background: ${this._primary};
-      color: white;
-      border: none;
-      border-radius: ${this.platform === 'material' ? 20 : 8}px;
-      cursor: pointer;
-      font-size: 14px;
-    `;
-    retryBtn.addEventListener('click', () => {
-      if (this.src) this._loadPDF(this.src);
-    });
+    ctx.fillStyle = this.backgroundColor || this._colors.viewerBg;
+    ctx.fillRect(this.x, this.y, this.width, this.height);
 
-    wrap.appendChild(retryBtn);
-    this._viewerEl.appendChild(wrap);
-  }
+    if (this.totalPages > 1) this._drawThumbs(ctx);
+    this._drawViewer(ctx);
+    if (this.showToolbar)   this._drawToolbar(ctx);
+    if (this._searchOpen)   this._drawSearchBar(ctx);
 
-  // ─── Actions ──────────────────────────────────────────────────────────────────
-
-  /**
-   * Change le niveau de zoom
-   * @param {number} newScale
-   * @private
-   */
-  _setScale(newScale) {
-    this.scale = Math.max(this.minScale, Math.min(this.maxScale, newScale));
-    this.scale = Math.round(this.scale * 100) / 100;
-    if (this._scaleLabel) this._scaleLabel.textContent = `${Math.round(this.scale * 100)}%`;
-    this.onScaleChange(this.scale);
-    if (this._pdfDoc) this._reRenderAll();
-  }
+    ctx.strokeStyle = this._isMat ? 'rgba(0,0,0,0.12)' : (this._colors.toolbarBorder || '#C6C6C8');
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    this._rr(ctx, this.x, this.y, this.width, this.height, this._isMat ? 4 : 12);
+    ctx.stroke();
 
-  /**
-   * Ajuste le zoom à la largeur du viewer
-   * @private
-   */
-  async _fitToWidth() {
-    if (!this._pdfDoc) return;
-    const page     = await this._pdfDoc.getPage(1);
-    const viewport = page.getViewport({ scale: 1 });
-    const availW   = this._viewerEl.clientWidth - 32;
-    const ratio    = availW / viewport.width;
-    this._setScale(ratio);
+    ctx.restore();
   }
 
-  /**
-   * Re-rend toutes les pages (après zoom ou rotation)
-   * @private
-   */
-  async _reRenderAll() {
-    this._viewerEl.innerHTML = '';
-    this._pageCanvases = {};
-    for (let p = 1; p <= this.totalPages; p++) {
-      await this._renderPage(p);
-    }
-    this.scrollToPage(this.currentPage);
-  }
+  _drawViewer(ctx) {
+    const vr = this._viewerRect;
+    ctx.save();
+    ctx.beginPath(); ctx.rect(vr.x, vr.y, vr.w, vr.h); ctx.clip();
+    ctx.fillStyle = this._colors.viewerBg;
+    ctx.fillRect(vr.x, vr.y, vr.w, vr.h);
 
-  /**
-   * Effectue une rotation de 90°
-   * @private
-   */
-  _rotate() {
-    this.rotation = (this.rotation + 90) % 360;
-    if (this._pdfDoc) this._reRenderAll();
-  }
+    const hasImages = Object.keys(this._pageImages).length > 0;
+    if      (this.loading && !hasImages)        this._drawLoading(ctx, vr);
+    else if (this.error   && !hasImages)        this._drawError(ctx, vr);
+    else if (!this.totalPages && !this.loading) this._drawEmpty(ctx, vr);
+    else                                        this._drawPages(ctx, vr);
 
-  /**
-   * Télécharge le PDF
-   * @private
-   */
-  _download() {
-    if (!this.src || typeof this.src !== 'string') return;
-    const a = document.createElement('a');
-    a.href = this.src;
-    a.download = this.src.split('/').pop() || 'document.pdf';
-    a.click();
+    ctx.restore();
   }
 
-  /**
-   * Imprime le PDF
-   * @private
-   */
-  _print() {
-    if (!this.src || typeof this.src !== 'string') return;
-    const w = window.open(this.src);
-    if (w) w.addEventListener('load', () => w.print());
-  }
+  _drawPages(ctx, vr) {
+    const pad = 16;
+    let y = vr.y + pad - this._scrollY;
 
-  /**
-   * Bascule en plein écran
-   * @private
-   */
-  _toggleFullscreen() {
-    if (!this._containerEl) return;
-    this._fullscreen = !this._fullscreen;
-    if (this._fullscreen) {
-      this._savedStyle = {
-        left: this._containerEl.style.left,
-        top:  this._containerEl.style.top,
-        width:this._containerEl.style.width,
-        height:this._containerEl.style.height,
-        zIndex:this._containerEl.style.zIndex,
-        borderRadius: this._containerEl.style.borderRadius,
-      };
-      this._containerEl.style.cssText += `
-        left: 0 !important;
-        top: 0 !important;
-        width: 100vw !important;
-        height: 100vh !important;
-        z-index: 99999 !important;
-        border-radius: 0 !important;
-      `;
-    } else {
-      if (this._savedStyle) {
-        Object.assign(this._containerEl.style, this._savedStyle);
+    for (let p = 1; p <= this.totalPages; p++) {
+      const img = this._pageImages[p];
+      const ph  = img ? img.height : 200;
+      const pw  = img ? Math.min(img.width, vr.w - pad * 2) : vr.w - pad * 2;
+      const px  = vr.x + (vr.w - pw) / 2;
+
+      if (y + ph >= vr.y && y <= vr.y + vr.h) {
+        ctx.shadowColor   = this._colors.pageShadow;
+        ctx.shadowBlur    = 8; ctx.shadowOffsetY = 2;
+        ctx.fillStyle     = this.pageBackground;
+        ctx.fillRect(px, y, pw, ph);
+        ctx.shadowBlur = 0; ctx.shadowOffsetY = 0;
+
+        if (img) {
+          ctx.drawImage(img, 0, 0, img.width, img.height, px, y, pw, ph);
+        } else {
+          ctx.fillStyle = '#ccc'; ctx.font = '13px sans-serif';
+          ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+          ctx.fillText(`Page ${p}…`, px + pw/2, y + ph/2);
+        }
+
+        ctx.fillStyle = 'rgba(0,0,0,0.28)'; ctx.font = '11px sans-serif';
+        ctx.textAlign = 'right'; ctx.textBaseline = 'bottom';
+        ctx.fillText(`${p} / ${this.totalPages}`, px + pw - 6, y + ph - 4);
       }
+      y += ph + pad;
     }
+    this._drawScrollbar(ctx, vr);
+  }
+
+  _drawScrollbar(ctx, vr) {
+    if (this._maxScrollY <= 0) return;
+    const tw = 5, tr = 3;
+    const tx = vr.x + vr.w - tw - 3;
+    const ty = vr.y + 4, th = vr.h - 8;
+    const ratio  = vr.h / (vr.h + this._maxScrollY);
+    const thumbH = Math.max(24, th * ratio);
+    const thumbY = ty + (this._scrollY / this._maxScrollY) * (th - thumbH);
+    ctx.fillStyle = 'rgba(0,0,0,0.08)'; this._rr(ctx, tx, ty, tw, th, tr); ctx.fill();
+    ctx.fillStyle = 'rgba(0,0,0,0.32)'; this._rr(ctx, tx, thumbY, tw, thumbH, tr); ctx.fill();
+  }
+
+  _drawLoading(ctx, vr) {
+    const cx = vr.x + vr.w/2, cy = vr.y + vr.h/2 - 20;
+    ctx.strokeStyle = 'rgba(0,0,0,0.1)'; ctx.lineWidth = 4;
+    ctx.beginPath(); ctx.arc(cx, cy, 22, 0, Math.PI*2); ctx.stroke();
+    ctx.strokeStyle = this._primary; ctx.lineWidth = 4; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.arc(cx, cy, 22, this._spinAngle, this._spinAngle + 1.3); ctx.stroke();
+    ctx.fillStyle = this._colors.onSurfaceVariant || '#49454F';
+    ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('Chargement...', cx, cy + 32);
+  }
+
+  _drawEmpty(ctx, vr) {
+    const cx = vr.x + vr.w/2, cy = vr.y + vr.h/2 - 20;
+    ctx.globalAlpha = 0.35; ctx.fillStyle = this._colors.onSurfaceVariant || '#49454F';
+    ctx.beginPath();
+    const fx = cx-20, fy = cy-26;
+    ctx.moveTo(fx+6,fy); ctx.lineTo(fx+28,fy); ctx.lineTo(fx+40,fy+14);
+    ctx.lineTo(fx+40,fy+54); ctx.quadraticCurveTo(fx+40,fy+58,fx+36,fy+58);
+    ctx.lineTo(fx+4,fy+58); ctx.quadraticCurveTo(fx,fy+58,fx,fy+54);
+    ctx.lineTo(fx,fy+6); ctx.quadraticCurveTo(fx,fy,fx+6,fy);
+    ctx.closePath(); ctx.fill();
+    ctx.globalAlpha = 1; ctx.fillStyle = this._colors.onSurfaceVariant || '#49454F';
+    ctx.font = '13px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('Aucun document chargé', cx, cy + 42);
+  }
+
+  _drawError(ctx, vr) {
+    const cx = vr.x + vr.w/2, cy = vr.y + vr.h/2 - 30;
+    const err = this._colors.error || '#BA1A1A';
+    ctx.fillStyle = err; ctx.beginPath(); ctx.arc(cx, cy, 24, 0, Math.PI*2); ctx.fill();
+    ctx.fillStyle = '#fff'; ctx.font = 'bold 26px sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('!', cx, cy);
+    ctx.fillStyle = err; ctx.font = '13px sans-serif'; ctx.textBaseline = 'top';
+    ctx.fillText((this.error || 'Erreur').substring(0, 60), cx, cy + 34);
+    const bx = cx - 48, by = cy + 62;
+    this._retryBtn = { x: bx, y: by, w: 96, h: 30 };
+    ctx.fillStyle = this._hoveredBtn === 'retry' ? this._primary + 'dd' : this._primary;
+    this._rr(ctx, bx, by, 96, 30, this._isMat ? 15 : 8); ctx.fill();
+    ctx.fillStyle = '#fff'; ctx.font = '13px sans-serif'; ctx.textBaseline = 'middle';
+    ctx.fillText('Réessayer', cx, by + 15);
+  }
+
+  _drawThumbs(ctx) {
+    const tr = this._thumbRect;
+    ctx.fillStyle = this._colors.thumbsBg; ctx.fillRect(tr.x, tr.y, tr.w, tr.h);
+    ctx.strokeStyle = this._colors.thumbBorder; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(tr.x+tr.w, tr.y); ctx.lineTo(tr.x+tr.w, tr.y+tr.h); ctx.stroke();
+
+    ctx.save(); ctx.beginPath(); ctx.rect(tr.x, tr.y, tr.w, tr.h); ctx.clip();
+    let ty = tr.y + 8;
+    for (let p = 1; p <= this.totalPages; p++) {
+      const img = this._thumbImages[p];
+      const tw  = tr.w - 16;
+      const th  = img ? Math.round(img.height * tw / img.width) : 70;
+      const tx  = tr.x + 8;
+      if (ty + th > tr.y && ty < tr.y + tr.h) {
+        const active = p === this.currentPage;
+        ctx.strokeStyle = active ? this._colors.thumbActive : this._colors.thumbBorder;
+        ctx.lineWidth   = active ? 2 : 1;
+        this._rr(ctx, tx, ty, tw, th, 3);
+        if (img) { ctx.drawImage(img, tx, ty, tw, th); ctx.stroke(); }
+        else { ctx.fillStyle = '#fff'; ctx.fill(); ctx.stroke(); }
+        ctx.fillStyle = '#666'; ctx.font = '10px sans-serif';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+        ctx.fillText(p, tx + tw/2, ty + th + 2);
+      }
+      ty += th + 18;
+    }
+    ctx.restore();
   }
 
-  // ─── Navigation ───────────────────────────────────────────────────────────────
-
-  /**
-   * Navigue vers une page spécifique
-   * @param {number} page
-   */
-  goToPage(page) {
-    if (!this._pdfDoc || page < 1 || page > this.totalPages) return;
-    this.currentPage = page;
-    if (this._pageInput) this._pageInput.value = page;
-    this.scrollToPage(page);
-    this._highlightThumbnail(page);
-    this.onPageChange(this.currentPage, this.totalPages);
-  }
+  _drawToolbar(ctx) {
+    const tb = this._tbRect;
+    ctx.fillStyle = this._primary; ctx.fillRect(tb.x, tb.y, tb.w, tb.h);
+    if (!this._isMat) {
+      ctx.strokeStyle = this._colors.toolbarBorder || '#C6C6C8'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(tb.x, tb.y+tb.h); ctx.lineTo(tb.x+tb.w, tb.y+tb.h); ctx.stroke();
+    }
 
-  /**
-   * Fait défiler jusqu'à une page
-   * @param {number} page
-   */
-  scrollToPage(page) {
-    const el = this._viewerEl && this._viewerEl.querySelector(`#pdf_page_${page}`);
-    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
+    ctx.save(); ctx.beginPath(); ctx.rect(tb.x, tb.y, tb.w, tb.h); ctx.clip();
+
+    this._tbButtons     = [];
+    this._pageInputRect = null;
+
+    let cx = tb.x + 12;
+    const my = tb.y + tb.h / 2;
+
+    // Titre
+    const title = typeof this.src === 'string' ? (this.src.split('/').pop() || 'Document.pdf') : 'Document.pdf';
+    ctx.fillStyle = 'rgba(255,255,255,0.92)';
+    ctx.font = `${this._isMat ? '500' : '600'} ${this._isMat ? 15 : 16}px sans-serif`;
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    let t = title;
+    const availW = tb.w - 200;
+    while (ctx.measureText(t).width > availW && t.length > 2) t = t.slice(0, -1);
+    if (t !== title) t += '…';
+    ctx.fillText(t, cx, my);
+
+    // Navigation
+    if (this.totalPages > 1 && this.allowNavigation) {
+      cx = tb.x + tb.w - 240;
+      cx = this._btn(ctx, cx, my, 'prev', this._icChevron('left'), 0, this.currentPage <= 1);
+      ctx.fillStyle = 'rgba(255,255,255,0.88)'; ctx.font = '13px sans-serif';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(`${this.currentPage}/${this.totalPages}`, cx + 20, my);
+      this._pageInputRect = { x: cx, y: my - 16, w: 44, h: 32 };
+      cx += 44;
+      cx = this._btn(ctx, cx, my, 'next', this._icChevron('right'), 0, this.currentPage >= this.totalPages);
+      cx += 8;
+    }
 
-  /**
-   * Page précédente
-   */
-  goToPreviousPage() {
-    if (this.currentPage > 1) this.goToPage(this.currentPage - 1);
-  }
+    // Zoom
+    cx = tb.x + tb.w - 120;
+    if (this.allowZoom) {
+      cx = this._btn(ctx, cx, my, 'zoomOut', '−', 20, this.scale <= this.minScale);
+      ctx.fillStyle = 'rgba(255,255,255,0.88)'; ctx.font = '12px sans-serif';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(`${Math.round(this.scale * 100)}%`, cx + 20, my);
+      cx += 44;
+      cx = this._btn(ctx, cx, my, 'zoomIn', '+', 20, this.scale >= this.maxScale);
+    }
 
-  /**
-   * Page suivante
-   */
-  goToNextPage() {
-    if (this.currentPage < this.totalPages) this.goToPage(this.currentPage + 1);
+    ctx.restore();
   }
 
-  // ─── API publique ─────────────────────────────────────────────────────────────
-
-  /**
-   * Charge un nouveau document PDF
-   * @param {string|Uint8Array} src - URL ou données binaires
-   */
-  load(src) {
-    this.src = src;
-    if (this._viewerEl) {
-      this._pdfDoc = null;
-      this._pageCanvases = {};
-      this._thumbCanvases = {};
-      if (this._thumbsEl) this._thumbsEl.innerHTML = '';
-      this._loadPDF(src);
+  _btn(ctx, x, y, id, content, fontSize = 0, disabled = false) {
+    const bw = 32, bh = 32, bx = x, by = y - 16;
+    if (this._hoveredBtn === id && !disabled) {
+      ctx.fillStyle = 'rgba(255,255,255,0.22)';
+      this._rr(ctx, bx, by, bw, bh, this._isMat ? 4 : 6); ctx.fill();
     }
+    this._tbButtons.push({ id, x: bx, y: by, w: bw, h: bh, disabled });
+    ctx.globalAlpha = disabled ? 0.35 : 1;
+    if (typeof content === 'string' && content.length <= 2) {
+      ctx.fillStyle = '#fff'; ctx.font = `${fontSize || 18}px sans-serif`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(content, bx + bw/2, y);
+    } else {
+      ctx.save(); ctx.translate(bx + 7, y - 9);
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+      ctx.stroke(new Path2D(content));
+      ctx.restore();
+    }
+    ctx.globalAlpha = 1;
+    return x + bw + 4;
+  }
+
+  _drawSearchBar(ctx) {
+    const sb = this._sbRect; if (sb.h === 0) return;
+    ctx.fillStyle = this._isMat ? this.m3Colors.surfaceVariant : '#F2F2F7';
+    ctx.fillRect(sb.x, sb.y, sb.w, sb.h);
+    ctx.strokeStyle = this._colors.outlineVariant || '#C6C6C8'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(sb.x, sb.y+sb.h); ctx.lineTo(sb.x+sb.w, sb.y+sb.h); ctx.stroke();
+
+    const fw = sb.w - 24 - 38, fh = sb.h - 16;
+    ctx.fillStyle = '#fff'; this._rr(ctx, sb.x+12, sb.y+8, fw, fh, this._isMat ? 4 : 8); ctx.fill();
+    ctx.strokeStyle = this._colors.outline || '#C6C6C8';
+    this._rr(ctx, sb.x+12, sb.y+8, fw, fh, this._isMat ? 4 : 8); ctx.stroke();
+    ctx.fillStyle = this._searchQuery ? '#000' : '#999';
+    ctx.font = '13px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText(this._searchQuery || 'Rechercher...', sb.x+20, sb.y+sb.h/2);
+
+    const clx = sb.x + sb.w - 34;
+    this._searchCloseRect = { x: clx, y: sb.y, w: 34, h: sb.h };
+    ctx.fillStyle = this._hoveredBtn === 'searchClose' ? '#444' : '#666';
+    ctx.font = '15px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('✕', clx + 17, sb.y + sb.h/2);
+  }
+
+  // ─── Actions ─────────────────────────────────────────────────────────────────
+
+  _handleBtn(id) {
+    switch (id) {
+      case 'prev':     this.goToPreviousPage();            break;
+      case 'next':     this.goToNextPage();                break;
+      case 'zoomIn':   this._setScale(this.scale + 0.25); break;
+      case 'zoomOut':  this._setScale(this.scale - 0.25); break;
+      case 'zoomFit':  this._fitToWidth();                 break;
+      case 'rotate':   this._rotate();                     break;
+      case 'search':   this._toggleSearch();               break;
+      case 'download': this._download();                   break;
+      case 'print':    this._print();                      break;
+    }
+    this.markDirty();
   }
 
-  /**
-   * Zoom à un niveau précis
-   * @param {number} scale - Facteur de zoom (ex: 1.5 = 150%)
-   */
-  setScale(scale) {
-    this._setScale(scale);
+  _setScale(s) {
+    this.scale = Math.max(this.minScale, Math.min(this.maxScale, Math.round(s * 100) / 100));
+    this.onScaleChange(this.scale);
+    this._reRenderAll();
   }
 
-  /**
-   * Retourne les métadonnées du document
-   * @returns {Promise<Object>}
-   */
-  async getMetadata() {
-    if (!this._pdfDoc) return null;
-    return this._pdfDoc.getMetadata();
+  async _fitToWidth() {
+    if (!this._pdfDoc) return;
+    const vp = (await this._pdfDoc.getPage(1)).getViewport({ scale: 1 });
+    this._setScale((this._viewerRect.w - 32) / vp.width);
   }
 
-  // ─── SVG Icons ────────────────────────────────────────────────────────────────
+  _rotate() { this.rotation = (this.rotation + 90) % 360; this._reRenderAll(); }
 
-  _svgChevron(dir) {
-    const pts = dir === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6';
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round">
-      <polyline points="${pts}"/>
-    </svg>`;
+  _download() {
+    if (typeof this.src !== 'string') return;
+    const a = document.createElement('a');
+    a.href = this.src; a.download = this.src.split('/').pop() || 'document.pdf'; a.click();
   }
 
-  _svgFit() {
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
-      <polyline points="15,3 21,3 21,9"/><polyline points="9,21 3,21 3,15"/>
-      <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
-    </svg>`;
+  _print() {
+    if (typeof this.src !== 'string') return;
+    const w = window.open(this.src);
+    if (w) w.addEventListener('load', () => w.print());
   }
 
-  _svgRotate() {
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
-      <path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 .49-4.46"/>
-    </svg>`;
-  }
+  _toggleSearch() { this._searchOpen = !this._searchOpen; this._computeMaxScroll(); this.markDirty(); }
 
-  _svgSearch() {
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
-      <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
-    </svg>`;
+  _promptPage() {
+    const v = prompt(`Aller à la page (1–${this.totalPages}) :`, this.currentPage);
+    if (v !== null) { const p = parseInt(v); if (p >= 1 && p <= this.totalPages) this.goToPage(p); }
   }
 
-  _svgDownload() {
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
-      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-      <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-    </svg>`;
-  }
+  // ─── Navigation publique ─────────────────────────────────────────────────────
 
-  _svgPrint() {
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
-      <polyline points="6 9 6 2 18 2 18 9"/>
-      <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
-      <rect x="6" y="14" width="12" height="8"/>
-    </svg>`;
+  goToPage(page) {
+    if (!this._pdfDoc || page < 1 || page > this.totalPages) return;
+    this.currentPage = page;
+    this._scrollY    = Math.max(0, Math.min(this._maxScrollY, this._pageScrollOffset(page) - 8));
+    this.onPageChange(page, this.totalPages);
+    this.markDirty();
   }
 
-  _svgFullscreen() {
-    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round">
-      <polyline points="15 3 21 3 21 9"/><polyline points="9 3 3 3 3 9"/>
-      <polyline points="21 15 21 21 15 21"/><polyline points="3 15 3 21 9 21"/>
-    </svg>`;
-  }
+  goToPreviousPage() { if (this.currentPage > 1) this.goToPage(this.currentPage - 1); }
+  goToNextPage()     { if (this.currentPage < this.totalPages) this.goToPage(this.currentPage + 1); }
 
-  // ─── Rendu Canvas (shell) ─────────────────────────────────────────────────────
+  // ─── API publique ─────────────────────────────────────────────────────────────
 
-  /**
-   * Rendu Canvas : monte l'overlay DOM et synchronise la position
-   * @param {CanvasRenderingContext2D} ctx
-   */
-  draw(ctx) {
-    ctx.save();
+  load(src) {
+    this.src = src; this._pdfDoc = null;
+    this._pageImages = {}; this._thumbImages = {}; this._scrollY = 0;
+    this._loadPDF(src);
+  }
 
-    if (!this._mounted) this._mount();
+  setScale(s)         { this._setScale(s); }
+  async getMetadata() { return this._pdfDoc ? this._pdfDoc.getMetadata() : null; }
 
-    // Synchronise la position
-    if (this._containerEl) {
-      const canvas = this.framework.canvas;
-      const rect   = canvas.getBoundingClientRect();
-      this._containerEl.style.left   = `${rect.left + this.x}px`;
-      this._containerEl.style.top    = `${rect.top  + this.y - (this.framework.scrollOffset || 0)}px`;
-      this._containerEl.style.width  = `${this.width}px`;
-      this._containerEl.style.height = `${this.height}px`;
-    }
+  // ─── Icônes ──────────────────────────────────────────────────────────────────
 
-    // Fond Canvas (zone réservée) — invisible car l'overlay DOM le couvre
-    ctx.fillStyle = this.backgroundColor || this._colors.viewerBg;
-    ctx.fillRect(this.x, this.y, this.width, this.height);
+  _icChevron(d) { return d === 'left' ? 'M12 3 L5 9 L12 15' : 'M6 3 L13 9 L6 15'; }
 
-    ctx.restore();
+  // ─── roundRect ───────────────────────────────────────────────────────────────
+
+  _rr(ctx, x, y, w, h, r) {
+    r = Math.min(r, w/2, h/2);
+    ctx.beginPath();
+    ctx.moveTo(x+r, y);       ctx.lineTo(x+w-r, y);
+    ctx.quadraticCurveTo(x+w, y,    x+w, y+r);
+    ctx.lineTo(x+w, y+h-r);
+    ctx.quadraticCurveTo(x+w, y+h,  x+w-r, y+h);
+    ctx.lineTo(x+r, y+h);
+    ctx.quadraticCurveTo(x,   y+h,  x, y+h-r);
+    ctx.lineTo(x, y+r);
+    ctx.quadraticCurveTo(x,   y,    x+r, y);
+    ctx.closePath();
   }
 
-  /**
-   * Vérifie si un point est dans le composant
-   */
   isPointInside(x, y) {
     return x >= this.x && x <= this.x + this.width &&
            y >= this.y && y <= this.y + this.height;
   }
 
-  /**
-   * Nettoie les ressources
-   */
   destroy() {
-    if (this._containerEl && this._containerEl.parentNode) {
-      this._containerEl.parentNode.removeChild(this._containerEl);
-    }
-    this._pdfDoc      = null;
-    this._mounted     = false;
-    this._containerEl = null;
-    super.destroy && super.destroy();
+    if (this._spinRAF) cancelAnimationFrame(this._spinRAF);
+    this._pdfDoc = null;
+    super.destroy?.();
   }
 }