/* =====================================================================
   css/mobile.css  —  ENVIRONNEMENT TÉLÉPHONE (mise à jour majeure).

   Ce fichier est 100 % ISOLÉ de l'environnement ordinateur :
   TOUTES les règles sont conditionnées par `html.phone` (classe posée
   par le script de détection d'index.html) ou par des identifiants qui
   n'existent que sur téléphone (#rotate-screen, #phone-start, #phone-ui…).
   Sur ordinateur, ce fichier ne change strictement rien à l'affichage.

   Contenu :
     1. Écran « pivotez votre téléphone » (portrait) ;
     2. Écran d'accueil téléphone dédié (paysage) ;
     3. HUD tactile : joystick, boutons d'action, barre supérieure ;
     4. Menu unique « façon applications » (remplace barre des tâches,
        sélecteurs de TP, fenêtres…) ;
     5. Adaptation des fenêtres existantes (feuille de relevés,
        calculatrice, tuteur Ohmie, mur de croquis) au petit écran.
   ===================================================================== */

/* ---------- 0. Base : ce que le téléphone cache / montre ---------- */
html.phone #start,
html.phone .hud,
html.phone #tutorFab,
html.phone #vignette {
    display: none !important;
}

/* le canvas 3D reste visible : c'est lui qui affiche le laboratoire */
html.phone #app {
    display: block;
}

html.phone #app canvas {
    touch-action: none;              /* le navigateur ne vole aucun geste */
    -webkit-touch-callout: none;     /* pas de menu contextuel iOS au toucher */
    -webkit-tap-highlight-color: transparent;
}

html.phone body {
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
}

/* =====================================================================
   1. ÉCRAN « PIVOTEZ VOTRE TÉLÉPHONE » (portrait)
   ===================================================================== */
#rotate-screen {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(34, 211, 238, 0.10), transparent),
        #05060a;
}
#rotate-screen.show {
    display: flex;
}
/* Filet de sécurité CSS pur (indépendant de js/mobile.js) : avant le
   lancement, l'orientation seule pilote les deux écrans téléphone. */
@media (orientation: portrait) {
    html.phone body:not(.phone-started) #rotate-screen { display: flex; }
    html.phone body:not(.phone-started) #phone-start { display: none !important; }
}
@media (orientation: landscape) {
    html.phone body:not(.phone-started) #phone-start { display: flex; }
}
.rot-card {
    max-width: 380px;
    padding: 34px 26px;
    border-radius: 20px;
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* petit téléphone dessiné en CSS qui pivote en boucle */
.rot-anim {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 18px;
}
.rot-device {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 84px;
    margin: -42px 0 0 -23px;
    border: 3px solid var(--cyan);
    border-radius: 9px;
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.35), inset 0 0 12px rgba(34, 211, 238, 0.12);
    animation: rotDevice 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.rot-device::after {                      /* bouton / barre du téléphone */
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: rgba(34, 211, 238, 0.7);
}
.rot-arrow {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(148, 163, 184, 0.35);
    border-radius: 50%;
    animation: rotArrow 2.6s linear infinite;
}
.rot-arrow::before {
    content: "➤";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    color: var(--amber);
    font-size: 14px;
}
@keyframes rotDevice {
    0%, 18%   { transform: rotate(0deg); }
    62%, 100% { transform: rotate(90deg); }
}
@keyframes rotArrow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#rotate-screen h2 {
    margin: 0 0 10px;
    font-size: 21px;
    color: #fff;
}
#rotate-screen p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.65;
}
#rotate-screen b { color: var(--cyan); }

/* =====================================================================
   2. ÉCRAN D'ACCUEIL TÉLÉPHONE (paysage, avant le lancement)
   ===================================================================== */
#phone-start {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: auto;
    background:
        radial-gradient(900px 480px at 50% -10%, rgba(34, 211, 238, 0.12), transparent),
        radial-gradient(700px 400px at 85% 110%, rgba(251, 191, 36, 0.08), transparent),
        rgba(5, 6, 10, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
body.phone-ready #phone-start {
    display: flex;
}

.ph-startcard {
    position: relative;
    width: min(680px, 96vw);
    padding: 18px 20px 16px;
    text-align: center;
}
.ph-startcard .title-grad {
    font-size: clamp(22px, 4.6vw, 34px);
    margin: 6px 0 4px;
}
.ph-startcard .sub {
    font-size: 12.5px;
    margin: 0 auto 12px;
    max-width: 520px;
}
.ph-tips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
@media (max-width: 700px) {
    .ph-tips { grid-template-columns: repeat(2, 1fr); }
}
.ph-tips .glass-soft {
    padding: 9px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ph-tips .mini {
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.4;
}
.ph-tips .mini .dim {
    display: block;
    font-size: 9.5px;
}
.ph-tips .ic {
    width: 18px;
    height: 18px;
}
#btnPhoneStart {
    font-size: 16px;
    padding: 13px 30px;
    min-height: 52px;
}
.ph-startcard .tip {
    font-size: 11px;
    margin: 10px 0 0;
    color: #94a3b8;
}

/* =====================================================================
   3. HUD TACTILE (après le lancement : body.phone-started)
   ===================================================================== */
#phone-ui {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;              /* seuls les contrôles sont tactiles */
}
body.phone-started #phone-ui {
    display: block;
}
#phone-ui button {
    pointer-events: auto;
    font-family: "Space Grotesk", system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ---- barre supérieure : menu + nom du TP + fps ---- */
#ph-topbar {
    position: absolute;
    top: calc(6px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
#ph-btn-menu {
    pointer-events: auto;
    width: 46px;
    height: 46px;
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: #cffafe;
    background: var(--glass);
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
#ph-btn-menu:active { transform: scale(0.94); }
#ph-tpname {
    pointer-events: none;              /* simple étiquette : ne bloque pas le toucher */
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: #a5f3fc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#ph-fps {
    flex: none;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: #64748b;
    padding: 4px 8px;
    background: rgba(13, 17, 27, 0.5);
    border-radius: 999px;
}

/* ---- joystick virtuel (déplacement) ---- */
#ph-joystick {
    position: absolute;
    left: calc(14px + env(safe-area-inset-left));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 128px;
    height: 128px;
    border-radius: 50%;
    pointer-events: auto;
    touch-action: none;
    background:
        radial-gradient(circle at center, rgba(34, 211, 238, 0.06), rgba(13, 17, 27, 0.42) 70%);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 0 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#ph-joystick::before {                 /* croix discrète */
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.10);
}
#ph-stick {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(103, 232, 249, 0.9), rgba(34, 211, 238, 0.55) 60%, rgba(8, 51, 68, 0.8));
    border: 1px solid rgba(165, 243, 252, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 18px rgba(34, 211, 238, 0.25);
    transition: transform 0.06s linear;
    will-change: transform;
}

/* ---- boutons d'action (droite) ---- */
#ph-actions {
    position: absolute;
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.ph-usebtn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 26px;
    color: #06202a;
    background: radial-gradient(circle at 35% 30%, #a5f3fc, #22d3ee 55%, #0e7490);
    border: 2px solid rgba(207, 250, 254, 0.8);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 24px rgba(34, 211, 238, 0.35);
    cursor: pointer;
}
.ph-usebtn span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ph-usebtn:active { transform: scale(0.93); }

.ph-icobtn {
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 19px;
    line-height: 1;
    color: #e0f2fe;
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.ph-icobtn:active { transform: scale(0.93); }
.ph-icobtn.on {
    border-color: rgba(34, 211, 238, 0.7);
    color: #67e8f9;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
}
.ph-icobtn.ph-small {
    min-width: 40px;
    height: 40px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 11px;
}
.ph-icobtn.ph-danger {
    border-color: rgba(248, 113, 113, 0.5);
    color: #fecaca;
}

/* ---- pavés contextuels (réglages − / + et objet saisi) ---- */
.ph-pad {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 18px;
    background: rgba(13, 17, 27, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.ph-pad.hidden { display: none; }
#ph-adjust { bottom: calc(96px + env(safe-area-inset-bottom)); }
#ph-dragpad { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* indicateur « mode croquis » */
#ph-drawtag {
    position: absolute;
    top: calc(58px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fde68a;
    background: rgba(30, 24, 10, 0.75);
    border: 1px solid rgba(251, 191, 36, 0.45);
    display: none;
    white-space: nowrap;
}
#ph-drawtag.show { display: block; }

/* =====================================================================
   4. MENU UNIQUE « FAÇON APPLICATIONS »
   (couche indipendente au-dessus des fenêtres : z 58)
   ===================================================================== */
#ph-menu {
    position: fixed;
    inset: 0;
    z-index: 58;
    pointer-events: auto;
}
#ph-menu.hidden { display: none; }
#ph-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 10, 0.62);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.ph-menu-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 16px));
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: phMenuIn 0.22s cubic-bezier(0.2, 1.1, 0.3, 1) both;
}
@keyframes phMenuIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ph-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #cffafe;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), transparent 70%);
    flex: none;
}
.ph-menu-body {
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.ph-sec {
    margin: 12px 0 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7dd3fc;
}
.ph-sec:first-child { margin-top: 2px; }

/* segments (TP, onglets, qualité, éclairage) */
.ph-seg {
    display: flex;
    gap: 6px;
}
.ph-seg.ph-wrap { flex-wrap: wrap; }
.ph-seg button {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    min-height: 44px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph-seg button.active {
    color: #06202a;
    background: linear-gradient(135deg, #67e8f9, #22d3ee);
    border-color: rgba(165, 243, 252, 0.8);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
}
.ph-seg button:active { transform: scale(0.97); }
#ph-subtabs:empty { display: none; }

/* tuiles « applications » */
.ph-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}
@media (max-width: 560px) {
    .ph-tiles { grid-template-columns: repeat(3, 1fr); }
}
.ph-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 4px 9px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    cursor: pointer;
}
.ph-tile .ph-tile-ic {
    font-size: 22px;
    line-height: 1;
}
.ph-tile:active { transform: scale(0.95); }
.ph-tile.on {
    border-color: rgba(52, 211, 153, 0.65);
    background: rgba(52, 211, 153, 0.12);
    color: #a7f3d0;
}

/* palette de fils */
.ph-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.ph-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.ph-swatch.sel {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.55), 0 3px 12px rgba(0, 0, 0, 0.5);
    transform: scale(1.08);
}

/* aide tactile */
.ph-help {
    margin-top: 8px;
    padding: 11px 13px;
    border-radius: 13px;
    background: rgba(34, 211, 238, 0.07);
    border: 1px solid rgba(34, 211, 238, 0.22);
    font-size: 12px;
    line-height: 1.7;
    color: #bae6fd;
}
.ph-help.hidden { display: none; }
.ph-help b { color: #67e8f9; }

/* =====================================================================
   5. PANNEAUX ORDINATEUR RÉUTILISÉS EN SUPERPOSITION (objectifs, état)
      → affichés seulement quand le menu téléphone les a activés
        (classe .mobile-show posée par js/mobile.js sur le CONTENEUR .hud)
   ===================================================================== */
html.phone .hud.tl.mobile-show {
    display: block !important;
    position: fixed;
    top: calc(58px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    width: min(310px, calc(100vw - 20px));
    max-height: 58dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 46;
    pointer-events: auto;              /* défilement tactile */
}
html.phone .hud.tl.mobile-show .panel-brand { display: none !important; }
html.phone .hud.tl.mobile-show .panel-missions {
    width: auto;
    margin-top: 0;
}
html.phone .hud.tr.mobile-show {
    display: flex !important;
    position: fixed;
    top: calc(58px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    width: min(300px, calc(100vw - 20px));
    max-height: 58dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 46;
    pointer-events: auto;
}
/* petit bouton ✕ ajouté par js/mobile.js — invisible sur ordinateur */
.ph-panel-close {
    display: none;
}
html.phone .ph-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 14px;
    color: #fecaca;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.4);
    cursor: pointer;
    z-index: 2;
    pointer-events: auto;
}
html.phone .panel-missions { position: relative; }

/* =====================================================================
   6. FENÊTRES EXISTANTES ADAPTÉES AU TÉLÉPHONE
      (uniquement sous body.is-phone : l'ordinateur garde sa mise en page)
   ===================================================================== */

/* ---- toasts : sous la barre supérieure, plus compacts ---- */
body.is-phone #toasts {
    top: calc(56px + env(safe-area-inset-top));
    max-width: 94vw;
    z-index: 120;
}
body.is-phone .toast {
    max-width: 82vw;
    font-size: 11px;
    padding: 6px 10px;
}

/* ---- feuille de relevés : plein écran, défilement tactile ---- */
body.is-phone #cahier .sheet {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 14px 14px calc(86px + env(safe-area-inset-bottom)) 16px;
    -webkit-user-select: text;
    user-select: text;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
body.is-phone #cahier .sheet::before { left: 8px; }
body.is-phone .paperhead {
    position: sticky;
    top: -14px;
    z-index: 3;
    background: linear-gradient(var(--paper) 72%, rgba(247, 242, 227, 0));
    padding-top: 6px;
    flex-wrap: wrap;
    gap: 6px;
}
body.is-phone .handtitle { font-size: 22px; }
body.is-phone .handsub { font-size: 12.5px; }
body.is-phone .ident {
    flex-wrap: wrap;
    gap: 8px;
}
body.is-phone .ident .field { flex: 1 1 140px; }
body.is-phone .tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.is-phone .paper-table { min-width: 560px; }
body.is-phone .paper-table td input,
body.is-phone .paper-table .cellin {
    font-size: 15px;
    min-height: 34px;
}
body.is-phone .bode-canvas-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.is-phone #bodeCanvas { min-width: 640px; }
body.is-phone .formula-grid {
    grid-template-columns: 1fr;
}
body.is-phone .paperactions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    background: rgba(247, 242, 227, 0.96);
    border-top: 1px solid rgba(44, 52, 80, 0.25);
    -webkit-overflow-scrolling: touch;
}
body.is-phone .paperactions .spacer { display: none; }
body.is-phone .paperactions .btn {
    flex: none;
    min-height: 42px;
    padding: 8px 13px;
    font-size: 12px;
    white-space: nowrap;
}
body.is-phone .formule-row {
    flex-wrap: wrap;
    gap: 8px;
}
body.is-phone .footnote { margin-bottom: 8px; }

/* ---- calculatrice ---- */
body.is-phone #calcModal {
    width: min(390px, calc(100vw - 12px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 14px 12px 18px;
    border-radius: 18px;
    -webkit-overflow-scrolling: touch;
}
body.is-phone .cbtn {
    min-height: 44px;
    font-size: 15px;
}

/* ---- tuteur Ohmie : barre de discussion ancrée au-dessus des boutons ---- */
html.phone body.is-phone #tutorDock {
    display: block !important;
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(112px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    z-index: 48;
}
html.phone body.is-phone #tutorDock.hiddenx {
    display: block !important;      /* la visibilité reste gérée par .hiddenx */
}
body.is-phone .dockwrap {
    max-height: min(320px, 46dvh);
}
body.is-phone #tdInput {
    font-size: 16px;                 /* évite le zoom automatique iOS */
    min-height: 42px;
}
body.is-phone .dockfoot .icobtn,
body.is-phone .dockfoot .sendbtn {
    min-width: 42px;
    min-height: 42px;
}
body.is-phone #tutorModal .tutorwin {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
    max-width: none;
}

/* ---- modal du mur des croquis ---- */
body.is-phone #wallModal .wall-modal-card {
    width: min(520px, calc(100vw - 14px));
    max-height: calc(100dvh - 14px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- viseur : légèrement plus grand au doigt ---- */
body.is-phone #crosshair .ring {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
}

/* ---- panneaux objectifs / état : texte lisible au doigt ---- */
body.is-phone .panel-missions .mission {
    font-size: 12px;
    padding: 5px 0;
}
body.is-phone .chip {
    font-size: 10px;
}

/* ---- très petits écrans (paysage < 380 px de haut) ---- */
@media (max-height: 420px) {
    #ph-joystick { width: 104px; height: 104px; }
    #ph-stick { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
    .ph-usebtn { width: 70px; height: 70px; font-size: 22px; }
    .ph-icobtn { min-width: 42px; height: 42px; font-size: 16px; }
    html.phone body.is-phone #tutorDock { bottom: calc(96px + env(safe-area-inset-bottom)); }
    body.is-phone .dockwrap { max-height: 38dvh; }
}