/* ============================================================
   TM Product Designer — Feuille de style MOBILE
   Mode "App plein écran" : t-shirt en haut, outils en feuille
   coulissante en bas, barre prix + CTA collée sous le pouce.
   Ne touche pas à l'affichage PC (> 980 px).
   ============================================================ */

/* ---------- Page studio dédiée (?tmpd_studio=ID), toutes tailles ---------- */
.tmpd-standalone .tmpd-modal { padding: 0; background: #f7f7f9; }
.tmpd-standalone .tmpd-studio {
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    border-radius: 0; box-shadow: none;
}

@media screen and (max-width: 767px) {

    /* ---------- Cadre général ---------- */
    #tmpd-modal { padding: 0; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
    #tmpd-modal .tmpd-studio {
        width: 100%; height: 100%;
        min-height: -webkit-fill-available;
        border-radius: 0; font-size: 14px;
        display: flex; flex-direction: column;
    }
    #tmpd-modal .canvas-container { touch-action: none; }

    /* ---------- Bandeau (Recto/Verso, annuler, copier, fermer) ---------- */
    #tmpd-modal .tmpd-head { gap: 6px; padding: 8px 10px; overflow-x: auto; flex-wrap: nowrap; flex: 0 0 auto; }
    #tmpd-modal .tmpd-vtab { padding: 8px 14px !important; font-size: .9em !important; }
    #tmpd-modal .tmpd-histbtns button { width: 34px !important; padding: 0 !important; }
    #tmpd-modal #tmpd-copyside { font-size: 0 !important; width: 38px !important; padding: 0 !important; }
    #tmpd-modal #tmpd-copyside::before { content: '⧉'; font-size: 17px; }

    /* ---------- Corps : un seul écran, pas de scroll de page ---------- */
    #tmpd-modal .tmpd-body { display: block; position: relative; flex: 1; overflow: hidden; padding: 0; }

    /* ---------- Scène : t-shirt centré plein cadre ---------- */
    #tmpd-modal .tmpd-stage { position: absolute; inset: 0 0 var(--tmpd-stagebot, 124px) 0; min-height: 0; padding: 4px 0 40px; overflow: hidden; }
    #tmpd-modal #tmpd-canvases { width: 100%; display: flex; justify-content: center; }
    #tmpd-modal .tmpd-cwrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
    /* la face inactive DOIT rester cachée (spécificité > la règle flex ci-dessus) */
    #tmpd-modal .tmpd-cwrap[hidden] { display: none !important; }
    #tmpd-modal .tmpd-cwrap .canvas-container {
        width: min(92vw, 58vh) !important;
        height: min(92vw, 58vh) !important;
        margin: 0 auto;
    }
    #tmpd-modal .tmpd-cwrap canvas { width: 100% !important; height: 100% !important; max-width: none; }
    #tmpd-modal .tmpd-stage-bar { bottom: 4px; gap: 10px; padding: 0 10px; }
    #tmpd-modal .tmpd-stage-hint { display: none; }

    /* ---------- Pastilles couleurs sous le t-shirt ---------- */
    #tmpd-modal #tmpd-mcolors { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 6px 10px 0; }
    #tmpd-modal #tmpd-mcolors .tmpd-pcolor {
        width: 36px !important; height: 36px !important;
        min-width: 36px !important; max-width: 36px !important;
        min-height: 36px !important; max-height: 36px !important;
        flex-basis: 36px !important;
    }

    /* ---------- Colonne infos PC : masquée sur mobile ---------- */
    #tmpd-modal .tmpd-side { display: none; }

    /* ---------- Outils : feuille coulissante au-dessus de la barre prix ---------- */
    #tmpd-modal .tmpd-tools {
        position: absolute; left: 0; right: 0; bottom: var(--tmpd-barh, 56px); top: auto;
        width: 100%; min-width: 0; border: 0; background: #fff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 34px rgba(0, 0, 0, .16);
        transform: translateY(calc(100% - var(--tmpd-peek, 66px)));
        transition: transform .22s ease;
        z-index: 40; display: flex; flex-direction: column; max-height: 60vh;
    }
    #tmpd-modal .tmpd-tools.open { transform: translateY(0); }
    #tmpd-modal .tmpd-ttabs {
        order: 0; display: grid; grid-template-columns: repeat(4, 1fr);
        border-bottom: 1px solid #f0f0f4; padding-top: 8px;
        position: relative; background: #fff; border-radius: 18px 18px 0 0;
    }
    /* poignée de la feuille */
    #tmpd-modal .tmpd-ttabs::before {
        content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
        width: 44px; height: 4px; border-radius: 99px; background: #d9d9e0;
    }
    #tmpd-modal .tmpd-ttab { padding: 7px 2px 8px !important; font-size: 11px !important; line-height: 1.25 !important; }
    #tmpd-modal .tmpd-ttab svg { width: 21px; height: 21px; display: block; margin: 0 auto 3px; }
    #tmpd-modal .tmpd-panels { overflow-y: auto; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
    #tmpd-modal .tmpd-font-list { max-height: 34vh; }
    #tmpd-modal .tmpd-clip-grid,
    #tmpd-modal .tmpd-tpl-grid { grid-template-columns: repeat(5, 1fr); }

    /* ---------- Barre prix + CTA collée en bas ---------- */
    #tmpd-modal .tmpd-mobilebar {
        display: flex; align-items: center; gap: 12px;
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
        background: #fff; border-top: 1px solid #e8e8ee;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
        min-height: 56px; box-sizing: border-box; gap: 10px;
    }
    #tmpd-modal .tmpd-mb-price { line-height: 1.1; white-space: nowrap; }
    #tmpd-modal .tmpd-mb-price small { display: block; font-size: .66em; text-transform: uppercase; letter-spacing: .05em; color: #888; font-weight: 700; }
    #tmpd-modal .tmpd-mb-price strong { font-size: 1.05em; }
    #tmpd-modal .tmpd-mobilebar .tmpd-cta { flex: 1; margin: 0; padding: 11px 10px !important; font-size: 15px !important; }

    /* ---------- Viewer de saisie : barre flottante en haut, t-shirt visible ---------- */
    #tmpd-modal #tmpd-mtxt {
        position: absolute; top: 60px; left: 8px; right: 8px; z-index: 55;
        display: flex; gap: 8px; background: #fff; border-radius: 14px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 8px;
    }
    #tmpd-modal #tmpd-mtxt[hidden] { display: none !important; }
    #tmpd-modal #tmpd-mtxt input { flex: 1; border: 1.5px solid #e2e2e8; border-radius: 10px; padding: 10px 12px; font-size: 16px; min-width: 0; }
    #tmpd-modal #tmpd-mtxt button { border: 0; background: #111; color: #fff; border-radius: 10px; width: 46px; font-size: 17px; cursor: pointer; }

    /* ---------- Panneaux (tailles, équipe, effets, partage…) ---------- */
    #tmpd-modal .tmpd-sizes-card { width: 94%; max-height: 90%; padding: 18px 16px 20px; }
    #tmpd-modal .tmpd-stepper button { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 20px !important; }
    #tmpd-modal .tmpd-team-row .tmpd-team-name { min-width: 0; flex: 1; }
    #tmpd-modal .tmpd-team-row .tmpd-team-num { width: 54px; flex: 0 0 54px; }
    #tmpd-modal .tmpd-fx-grid { grid-template-columns: repeat(3, 1fr); }
    #tmpd-modal .tmpd-rights { font-size: .8em; }
}


/* Étiquettes de dimensions sur l'objet sélectionné (toutes plateformes) */
.tmpd-dimchip {
    position: absolute; z-index: 30; background: #111; color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
    transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
}
.tmpd-dimchip-v { transform: translate(-50%, -50%) rotate(-90deg); }
.tmpd-dimchip[hidden] { display: none !important; }