/* =====================================================================
   MISE EN PAGE MOBILE
   - Portrait (≤ 768 px) : panneau fixé en bas, la 3D occupe tout l'espace au-dessus.
   - Paysage (hauteur ≤ 500 px) : panneau à droite, la 3D occupe le reste.
   La hauteur du panneau est mesurée en JS et exposée dans --panel-h.
   Ce fichier doit être chargé APRÈS configurateur.css.
   ===================================================================== */

@media (max-width: 768px) {

    #app {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;   /* évite le décalage de la barre d'adresse sur mobile */
        overflow: hidden !important;
    }

    /* Zone 3D : tout ce qui est au-dessus du panneau */
    #canvas-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--panel-h, 40vh) !important;
        width: auto !important;
        height: auto !important;
    }
    #canvas-container canvas {
        display: block;
    }

    /* Couche des hotspots : limitée à la zone 3D (même origine que le canvas) */
    #hotspots {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--panel-h, 40vh) !important;
        width: auto !important;
        height: auto !important;
        overflow: hidden;
        pointer-events: none;
    }
    #hotspots .hotspot {
        pointer-events: auto;
    }

    /* Texte d'un hotspot : juste au-dessus du panneau, fermable */
    #hotspot-info {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--panel-h, 40vh) + 8px) !important;
        width: auto !important;
        max-width: none !important;
        max-height: 30vh;
        max-height: 30dvh;
        overflow-y: auto;
        transform: none !important;
        z-index: 20;
        box-sizing: border-box;
    }

    /* Panneau : barre compacte en bas */
    #panel {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        max-height: 42vh;
        max-height: 42dvh;
        margin: 0 !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
        overflow-y: auto;
        border-radius: 14px 14px 0 0;
        background: rgba(24, 24, 24, .96);
        color: #fff;
        transform: none !important;
        z-index: 30;

        display: flex !important;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 8px 20px;
    }

    #panel h1 {
        flex: 1 1 100%;
        margin: 0;
        font-size: 15px;
    }

    /* Variantes : une seule ligne défilable horizontalement */
    #variant-menu {
        flex: 1 1 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #variant-menu::-webkit-scrollbar {
        display: none;
    }
    #variant-menu button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Les deux menus de coloris côte à côte */
    #panel .swatch-group {
        flex: 0 0 auto;
        margin: 0 !important;
    }
    #panel .swatch-group h3 {
        margin: 0 0 6px;
        font-size: 11px;
    }

    #variant-text {
        flex: 1 1 100%;
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }
    #error {
        flex: 1 1 100%;
        margin: 0;
    }
}


/* ---------- Paysage sur téléphone : panneau à droite ---------- */
@media (max-height: 500px) and (orientation: landscape) {

    #panel {
        top: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        right: 0 !important;
        width: 270px !important;
        max-height: none !important;
        padding: 10px calc(12px + env(safe-area-inset-right)) 10px 12px !important;
        border-radius: 0;
    }
    #panel h1 {
        display: none;
    }
    #variant-menu {
        flex-wrap: wrap !important;
        overflow-x: visible;
    }

    #canvas-container,
    #hotspots {
        bottom: 0 !important;
        right: 270px !important;
    }

    #hotspot-info {
        left: 8px !important;
        right: 278px !important;
        bottom: 8px !important;
        max-height: 50vh;
        max-height: 50dvh;
    }
}