/* ══════════════════════════════════════════════════════════════════════
   STYLE-PHONE.CSS — Adaptations mobiles pour Le Bureau du Prof
   À charger APRÈS style.css dans index.html :
       <link rel="stylesheet" href="style-phone.css" media="(max-width: 768px)">
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ════════════════════════════════════════════════════════
       1. BOARD & BODY
    ════════════════════════════════════════════════════════ */

    body, html {
        overflow: hidden; /* évite le scroll parasite sur mobile */
        height: 100%;
        width: 100%;
        /* Empêche le zoom involontaire au double-tap */
        touch-action: manipulation;
    }

    #board {
        /* Le board occupe toute la hauteur en soustrayant la bottom-bar */
        min-height: calc(100vh - 60px) !important;
        width: 100vw !important;
    }


    /* ════════════════════════════════════════════════════════
       2. BOUTONS FAB (menu principal + dessin)
          Réduits, repositionnés pour ne pas encombrer
    ════════════════════════════════════════════════════════ */

    #fab-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
        bottom: 14px !important;
        left: 14px !important;
    }

    #draw-fab-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 19px !important;
        bottom: 14px !important;
        right: 14px !important;
    }


    /* ════════════════════════════════════════════════════════
       3. MENU PRINCIPAL (#main-menu)
          Repositionné au-dessus du FAB, items légèrement réduits
    ════════════════════════════════════════════════════════ */

    #main-menu {
        bottom: 68px !important;
        left: 10px !important;
        gap: 3px !important;
    }

    .mm-item {
        font-size: 12px !important;
        padding: 5px 10px !important;
        min-width: 110px !important;
        border-radius: 16px !important;
    }

    .mm-item .mm-ico {
        font-size: 20px !important;
        width: 22px !important;
    }

    .mm-sub-inner {
        max-height: 70vh !important;
    }

    .mm-section-label {
        font-size: 8px !important;
    }


    /* ════════════════════════════════════════════════════════
       4. ONGLETS LATÉRAUX (tabs des panneaux)
          Réduits en taille, repositionnés pour mobile
    ════════════════════════════════════════════════════════ */

    /* Onglet stickers */
    #sticker-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #sticker-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet widgets */
    #widgets-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #widgets-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet activités */
    #activities-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #activities-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet outils */
    #tools-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #tools-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet affichage */
    #display-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #display-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet projets */
    #projects-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #projects-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet PDF */
    #pdf-library-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #pdf-library-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    /* Onglet images */
    #image-panel-tab {
        left: -28px !important;
        width: 58px !important;
        height: 65px !important;
    }

    #image-panel-tab.tab-js-hover {
        width: 160px !important;
        height: 80px !important;
        padding-left: 40px !important;
    }

    .tab-emoji { font-size: 36px !important; }
    .tab-label { font-size: 14px !important; }


    /* ════════════════════════════════════════════════════════
       5. PANNEAUX LATÉRAUX
          Pleine largeur sur mobile pour faciliter la navigation
    ════════════════════════════════════════════════════════ */

    :root {
        --sticker-panel-w: 88vw !important;
        --widgets-panel-w: 92vw !important;
    }

    #sticker-panel,
    #widgets-panel,
    #activities-panel,
    #tools-panel,
    #display-panel,
    #projects-panel,
    #pdf-library-panel,
    #image-panel {
        width: 88vw !important;
    }

    /* Headers des panneaux : réduire le padding gauche
       (les onglets prennent moins de place en mobile) */
    #sticker-panel-header,
    #sticker-mode-bar,
    #sticker-panel-tabs,
    #sticker-panel-search,
    #sp-content {
        padding-left: 14px !important;
    }

    #widgets-panel-header,
    #widgets-panel-content {
        padding-left: 14px !important;
    }


    /* ════════════════════════════════════════════════════════
       6. GRILLES DE WIDGETS (dans le panneau widgets)
          Passer de 4 colonnes à 3
    ════════════════════════════════════════════════════════ */

    .widgets-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .widgets-card-ico { font-size: 36px !important; }
    .widgets-card-name { font-size: 10px !important; }
    .widgets-card-desc { font-size: 9px !important; }


    /* ════════════════════════════════════════════════════════
       7. BARRE D'OUTILS DESSIN (#draw-toolbar)
          Forcer le mode horizontal et réduire la taille
    ════════════════════════════════════════════════════════ */

    #draw-toolbar {
        max-width: calc(100vw - 30px) !important;
        padding: 6px 8px !important;
    }

    /* Boutons dans les toolbars dessin/forme */
    #draw-toolbar button,
    #shape-toolbar button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 14px !important;
        padding: 0 !important;
    }


    /* ════════════════════════════════════════════════════════
       8. BARRE DE SCÈNES (#scenes-bar)
          Plus compacte
    ════════════════════════════════════════════════════════ */

    #scenes-bar {
        max-width: calc(100vw - 120px) !important;
    }

    .scene-tab {
        font-size: 11px !important;
        padding: 4px 10px !important;
        max-width: 110px !important;
    }

    .scene-tab-name {
        max-width: 70px !important;
    }

    #scene-add-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }


    /* ════════════════════════════════════════════════════════
       9. TOOLBAR CONTAINER & BOTTOM BAR
          Réduits en hauteur, boutons plus accessibles
    ════════════════════════════════════════════════════════ */

    #toolbar-container {
        height: auto !important;
        min-height: 50px !important;
        padding: 4px 6px !important;
    }

    .tool-btn {
        padding: 6px 8px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .undo-btn, .redo-btn {
        padding: 4px 5px !important;
        font-size: 16px !important;
    }


    /* ════════════════════════════════════════════════════════
       10. HANDLES & CONTRÔLES DE WIDGETS
           Légèrement agrandis pour faciliter le toucher
    ════════════════════════════════════════════════════════ */

    .drag-handle,
    .widget-close-handle,
    .widget-pin-handle,
    .widget-rotate-handle,
    .widget-menu-handle,
    .widget-back-handle,
    .widget-anchor-handle {
        width: 32px !important;
        height: 32px !important;
    }

    .widget-action-bar {
        bottom: -46px !important;
        gap: 6px !important;
    }

    .widget-action-bar.above {
        top: -46px !important;
        bottom: auto !important;
    }

    /* Poignée resize custom légèrement plus grande */
    .custom-resize-handle {
        width: 24px !important;
        height: 24px !important;
    }


    /* ════════════════════════════════════════════════════════
       11. BARRE DE SÉLECTION (#selection-controls)
    ════════════════════════════════════════════════════════ */

    #selection-controls .sc-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    #sc-action-bar {
        bottom: -52px !important;
        gap: 6px !important;
    }

    #sc-action-bar.above {
        top: -52px !important;
        bottom: auto !important;
    }


    /* ════════════════════════════════════════════════════════
       12. INDICATEUR A4
    ════════════════════════════════════════════════════════ */

    #a4-indicator {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }


    /* ════════════════════════════════════════════════════════
       13. BOUTON PRÉSENTATION & ONGLET MODE PRÉSENTATION
    ════════════════════════════════════════════════════════ */

    #pres-mode-tab {
        font-size: 10px !important;
    }


    /* ════════════════════════════════════════════════════════
       14. TITRE DU PROJET COURANT
    ════════════════════════════════════════════════════════ */

    #current-project-name {
        font-size: 9px !important;
        max-width: 70px !important;
        width: 70px !important;
        bottom: 2px !important;
        left: 64px !important; /* décalé pour ne pas chevaucher le FAB */
    }


    /* ════════════════════════════════════════════════════════
       15. MODALES
           Pleine largeur sur mobile
    ════════════════════════════════════════════════════════ */

    .modal-content {
        max-width: 95vw !important;
        padding: 20px !important;
    }


    /* ════════════════════════════════════════════════════════
       16. MENUS CONTEXTUELS (widget-ctx-menu, sc-ctx-menu)
    ════════════════════════════════════════════════════════ */

    .widget-ctx-menu,
    #sc-ctx-menu {
        min-width: 155px !important;
        font-size: 13px !important;
    }

    .widget-ctx-menu button,
    #sc-ctx-menu button {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }


    /* ════════════════════════════════════════════════════════
       17. COLOR PICKER (cpick-popup)
    ════════════════════════════════════════════════════════ */

    .cpick-popup {
        width: min(200px, 90vw) !important;
    }


    /* ════════════════════════════════════════════════════════
       18. BARRE D'ONGLETS PDF PLEIN ÉCRAN (#pdf-fs-tabbar)
    ════════════════════════════════════════════════════════ */

    #pdf-fs-tabbar {
        height: 44px !important;
        padding: 4px 6px 0 6px !important;
    }

    .pdf-fs-tab {
        font-size: 11px !important;
        padding: 0 8px 0 10px !important;
        min-width: 50px !important;
    }


    /* ════════════════════════════════════════════════════════
       19. ROTATION INDICATOR
    ════════════════════════════════════════════════════════ */

    #rotation-indicator {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

} /* fin @media (max-width: 768px) */


/* ════════════════════════════════════════════════════════
   TRÈS PETIT ÉCRAN (< 400px — ex. iPhone SE)
════════════════════════════════════════════════════════ */

@media (max-width: 400px) {

    .mm-item {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-width: 98px !important;
    }

    .mm-item .mm-ico {
        font-size: 17px !important;
        width: 19px !important;
    }

    #sticker-panel,
    #widgets-panel,
    #activities-panel,
    #tools-panel,
    #display-panel,
    #projects-panel,
    #pdf-library-panel,
    #image-panel {
        width: 95vw !important;
    }

    .widgets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .scene-tab {
        font-size: 10px !important;
        padding: 3px 8px !important;
        max-width: 90px !important;
    }

    #fab-btn,
    #draw-fab-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
    }

}