/* Eklezia One Studio — VERSION MOBILE et TABLETTE EN PORTRAIT (modèle du user, 2026-10-14).
   Chargée seulement sous 900 px de large (media dans index.html), APRÈS studio.css. Les éléments #m… sont créés par js/mobile.js.
   En-tête (logo, état, initiale, menu) · image du public en grand, collée en haut · une colonne · menu du bas. */
:root { --mtop: 74px; --mnav: 74px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --sidew: 0px; --rightw: 0px; }
html, body { height: 100%; }
body { height: 100dvh; overflow: hidden; -webkit-text-size-adjust: 100%; background: #060b14; }
* { min-width: 0; }
img, canvas, video, iframe { max-width: 100%; }
button, select, input, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- en-tête ---------- */
.topbar { height: calc(var(--mtop) + var(--safe-t)); padding: var(--safe-t) 14px 0 !important; gap: 10px !important; background: linear-gradient(180deg, #0a1322, #070d18) !important; border-bottom: 1px solid rgba(243,194,79,.14) !important; position: relative; z-index: 60; }
.topbar > :not(.brand):not(#mHeadR) { display: none !important; }
.topbar .brand { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .ek-mark { width: 40px !important; height: 40px !important; flex: none; }
.topbar .brand > div { display: flex !important; flex-direction: column; min-width: 0; }
.topbar .brand b { font-size: 19px !important; letter-spacing: .01em; white-space: nowrap; } .topbar .brand small { font-size: 10.5px !important; letter-spacing: .38em; color: #e6ebf1 !important; }
.m-tag { font-style: normal; font-size: 10.5px; color: #8b98a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mHeadR { display: flex; align-items: center; gap: 10px; flex: none; }
.m-state { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 4px; border: 0; background: none; color: #c7d0dc; font-size: 12.5px; max-width: 34vw; }
.m-state i { width: 9px; height: 9px; border-radius: 50%; background: #93a1b3; flex: none; } .m-state.ok i { background: #27c76f; box-shadow: 0 0 8px rgba(39,199,111,.8); } .m-state.warn i { background: #f0a72f; } .m-state.fail i { background: #e62b2b; }
.m-state span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-av { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #16213a; border: 1.5px solid #2c3d5e; color: #fff; font-weight: 800; font-size: 17px; flex: none; }
.m-menu { width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #e6ebf1; } .m-menu svg { width: 26px; height: 26px; }

/* ---------- une seule colonne qui défile ---------- */
.app { display: block !important; height: calc(100dvh - var(--mtop) - var(--safe-t) - var(--mnav) - var(--safe-b)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.side, .statusbar, .right > .rc-pgmh, .right > #rcPgmSlot { display: none !important; }
.main { overflow: visible !important; padding: 0 14px 18px !important; }
.right { overflow: visible !important; padding: 0 14px 28px !important; gap: 12px !important; }
body[data-page="home"] .right { display: none !important; }
body[data-page="home"] .page[data-page="home"] > :not(#mHome) { display: none !important; }

/* ---------- l'image du public ---------- */
#mPgmSlot { display: block; position: sticky; top: 0; z-index: 35; margin: 0 -14px 14px; padding: 10px 14px 8px; background: linear-gradient(180deg, #060b14 88%, rgba(6,11,20,0)); }
body[data-page="onscreen"] #mPgmSlot, body[data-page="studio"] #mPgmSlot { display: none; }
#mPgmSlot .m-ph { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
body.fmt-v #mPgmSlot .m-ph { aspect-ratio: auto; height: 50dvh; }
#pgmCard.docked { padding: 0 !important; border-radius: 16px !important; overflow: hidden; z-index: 36 !important; border: 1.5px solid rgba(243,194,79,.35) !important; box-shadow: 0 0 30px rgba(243,194,79,.12), 0 16px 40px rgba(0,0,0,.5) !important; }
#pgmCard.docked .mon-h, #pgmCard.docked .cambar, #pgmCard.docked .quick, #pgmCard.docked .pvbar { display: none !important; }
#pgmCard .m-ov { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
body[data-page="onscreen"] #pgmCard .m-ov, body[data-page="studio"] #pgmCard .m-ov { display: none; }
.m-ov > * { pointer-events: auto; }
.m-live { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 800; }
.m-live b { font-variant-numeric: tabular-nums; font-weight: 700; } .m-live.on { background: #e62b2b; box-shadow: 0 0 16px rgba(230,43,43,.5); }
.m-res { position: absolute; right: 10px; top: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12.5px; font-weight: 700; }
.m-lvl { position: absolute; right: 14px; top: 48px; bottom: 62px; width: 8px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; display: flex; align-items: flex-end; }
.m-lvl i { display: block; width: 100%; height: 0; background: linear-gradient(0deg, #27c76f 0 60%, #f3c24f 60% 85%, #e62b2b 85%); transition: height .12s; }
.m-ctl { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.m-ctl button { flex: none !important; width: 50px !important; height: 50px; min-width: 0 !important; padding: 0; border: 0; border-radius: 12px; background: rgba(8,12,20,.75); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.m-ctl svg { width: 22px; height: 22px; } .m-sp { flex: 1; }
.m-recb i { width: 20px; height: 20px; border-radius: 50%; background: #e62b2b; transition: border-radius .2s; } .m-recb.on i { border-radius: 4px; box-shadow: 0 0 12px rgba(230,43,43,.8); }

#mNav svg, .m-ti, .m-list svg, .m-ctl svg, .m-menu svg, .m-qi { fill: none; stroke: currentColor; }
.m-tile b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* ---------- accueil : tuiles, actions rapides, scènes ---------- */
#mHome { display: flex; flex-direction: column; gap: 14px; }
.m-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 112px; padding: 14px 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); color: #fff; text-align: left; }
.m-tile .m-ti { width: 34px; height: 34px; margin-bottom: auto; } .m-tile b { font-size: 15px; } .m-tile small { font-size: 12px; color: rgba(230,235,241,.75); line-height: 1.25; }
.m-chev { position: absolute; right: 12px; top: 12px; font-size: 20px; color: rgba(255,255,255,.7); }
.t-blue { background: linear-gradient(160deg, #1d3a7a, #0f1f44); } .t-blue .m-ti { color: #5ea8ff; }
.t-violet { background: linear-gradient(160deg, #4a1f6b, #24113a); } .t-violet .m-ti { color: #e879f9; }
.t-teal { background: linear-gradient(160deg, #0f5a55, #0a302f); } .t-teal .m-ti { color: #3ddc97; }
.t-red { background: linear-gradient(160deg, #7a2416, #3a120b); border-color: rgba(255,107,61,.4); } .t-red .m-ti { color: #ff6b3d; }
.t-indigo { background: linear-gradient(160deg, #35287a, #1a1440); } .t-indigo .m-ti { color: #c084fc; }
.t-sky { background: linear-gradient(160deg, #123d63, #0a2036); } .t-sky .m-ti { color: #38bdf8; }
.t-gold { background: linear-gradient(160deg, #4a3a14, #241c0a); border-color: rgba(243,194,79,.4); } .t-gold .m-ti { color: #f3c24f; }
.t-grey { background: linear-gradient(160deg, #2a3442, #151b24); } .t-grey .m-ti { color: #c7d0dc; }
.m-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .m-sec h3 { margin: 0; color: #fff; font-size: 18px; }
.m-all { border: 0; background: none; color: #93a1b3; font-size: 13.5px; }
.m-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m-quick button { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px; border-radius: 14px; border: 1px solid #22304a; background: #0e1726; color: #fff; text-align: left; }
.m-qi { width: 32px; height: 32px; flex: none; } .m-qrec { color: #e62b2b; } .m-quick span { display: flex; flex-direction: column; } .m-quick b { font-size: 13.5px; font-weight: 600; } .m-quick small { font-size: 12.5px; color: #c7d0dc; }
.m-scenes { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .m-scenes::-webkit-scrollbar { display: none; }
.m-sc { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 8px; border-radius: 12px; border: 1.5px solid #22304a; background: #0e1726; color: #fff; font-size: 13.5px; }
.m-sc.on { border-color: #f3c24f; box-shadow: 0 0 14px rgba(243,194,79,.2); } .m-sc .pg-th { width: 100%; border-radius: 8px; }
.m-msg { margin: 0; min-height: 18px; color: #f3c24f; font-size: 13px; }

/* ---------- menu du bas ---------- */
#mNav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(var(--mnav) + var(--safe-b)); padding: 6px 6px var(--safe-b);
  background: rgba(9,15,26,.97); backdrop-filter: blur(14px); border-top: 1px solid rgba(243,194,79,.16); }
#mNav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: #c7d0dc; font-size: 12px; font-weight: 600; }
#mNav svg { width: 26px; height: 26px; } #mNav button.sel { color: #f3c24f; }
#mNav button.sel::before { content: ""; position: absolute; top: -6px; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: #f3c24f; }
#mMore { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; } #mMore[hidden] { display: none; }
.m-sheet { width: 100%; max-height: 80dvh; overflow-y: auto; padding: 8px 16px calc(18px + var(--safe-b)); border-radius: 20px 20px 0 0; background: #0e1726; border-top: 1px solid #2a3a55; }
.m-grab { width: 44px; height: 5px; margin: 4px auto 12px; border-radius: 3px; background: #3a4a66; } .m-sheet h3 { margin: 0 0 10px; color: #fff; font-size: 17px; }
.m-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m-list button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px; border-radius: 12px; border: 1px solid #22304a; background: #101b2c; color: #fff; font-size: 14px; text-align: left; }
.m-list svg { width: 22px; height: 22px; color: #f3c24f; flex: none; } .m-list span { flex: 1; } .m-list i { font-style: normal; color: #6f7f92; }

/* ---------- les autres pages : une colonne, cartes pleine largeur ---------- */
.ptabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; margin: 0 0 10px !important; } .ptabs::-webkit-scrollbar { display: none; } .ptabs button { flex: none; white-space: nowrap; }
.cm-view, .rp-view, .lv-view, .pg-view, .pr-cam { display: none !important; }
.page { gap: 12px !important; }
.page > .card, .card, .mc-card { max-width: 100% !important; padding: 14px !important; border-radius: 14px !important; }
.mc-head { flex-wrap: wrap; gap: 10px !important; padding: 14px !important; }
.mc-head h1 { font-size: 22px !important; } .mc-head p { font-size: 13.5px !important; }
.mc-head .mc-big, .mc-head .mc-big svg { width: 38px !important; height: 38px !important; }
.mc-head .mc-btn { height: 40px !important; padding: 0 12px !important; font-size: 13px !important; }
.pg-grid, .os-grid, .pg-ed, .lv-top, .lv-row2, .rp-top, .pr-main, .home-steps, .os-modes { grid-template-columns: minmax(0, 1fr) !important; }
[class$="-grid"]:not(.m-tiles):not(.cm-grid), [class*="-grid "]:not(.m-tiles) { grid-template-columns: minmax(0, 1fr) !important; }
.os-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .os-tab { flex: none !important; height: 40px; }
.os-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .os-decos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.os-list, .pg-list { max-height: none !important; }
.pg-sc { grid-template-columns: 18px 84px minmax(0, 1fr) 28px !important; }
.pg-form label { grid-template-columns: 104px minmax(0, 1fr) !important; }
.pg-add { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lv-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lv-p { grid-template-columns: 34px minmax(0, 1fr) auto !important; } .lv-p .lv-t, .lv-p .lv-gear { grid-column: 1 / -1; }
.lv-bar { grid-template-columns: minmax(0, 1fr) !important; }
.lv-tools, .lv-st { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.row { flex-wrap: wrap; }
table { display: block; overflow-x: auto; }
select, input[type=text], input[type=search], input[type=number], textarea { font-size: 16px !important; }   /* iPhone : pas de zoom automatique */
.modal .mbox, .os-mbox { width: 100% !important; max-width: 100% !important; max-height: 92dvh; overflow-y: auto; border-radius: 18px 18px 0 0 !important; align-self: flex-end; }
#osModal, .modal { align-items: flex-end !important; }
.stall-banner { top: calc(var(--mtop) + var(--safe-t)) !important; font-size: 13px !important; }
#webBadge { bottom: calc(var(--mnav) + var(--safe-b) + 8px) !important; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- téléphone étroit : tuiles et actions sur 2 colonnes, en-tête plus court ---------- */
@media (max-width: 560px) {
  .m-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .m-tile { min-height: 104px; padding: 10px 8px; } .m-tile .m-ti { width: 28px; height: 28px; } .m-tile b { font-size: 13px; } .m-tile small { font-size: 10.5px; } .m-chev { right: 8px; top: 8px; font-size: 16px; }
  .m-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-state span { display: none; } .m-tag { display: none; }
}
@media (max-width: 380px) { .m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar .brand small { letter-spacing: .25em; } }
/* en-tête de page : icône + titre sur une ligne, boutons dessous */
.mc-head > div { flex: 1 1 calc(100% - 64px) !important; min-width: 0; }
.mc-head > .mc-btn, .mc-head > button { flex: 1 1 auto !important; justify-content: center; }
.mc-head h1 { line-height: 1.15; }
.m-snd { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 99px; background: rgba(243,194,79,.95); color: #1a1205; font-size: 15px; font-weight: 800; box-shadow: 0 8px 26px rgba(0,0,0,.5); white-space: nowrap; }
.m-snd[hidden] { display: none; }
/* textes de l'ancien moniteur : jamais par-dessus les commandes du téléphone */
#pgmCard.docked .pvaudio, #pgmCard.docked .pv-l, #pgmCard.docked #pvLive, #pgmCard.docked .scr-cta { display: none !important; }
.m-aud { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid rgba(61,220,132,.5); border-radius: 99px; background: rgba(8,40,24,.92); color: #c7f5dc; font-size: 13px; font-weight: 700; white-space: nowrap; }
.m-aud[hidden] { display: none; }
.mc-err { margin: 8px 0 0; color: #ffb3b3; font-size: 13px; line-height: 1.4; }

/* ---------- TÉLÉPHONE : seulement ce qui sert sur un téléphone ---------- */
body.m-phone #mcAdv, body.m-phone #mcKey, body.m-phone #audioCard, body.m-phone #lvAdvBtn,
body.m-phone #muTabs [data-mt="in"], body.m-phone #pillarTabs [data-go="recstudio"], body.m-phone #pillarTabs [data-go="mstudio"], body.m-phone #pillarTabs [data-go="remote"],
body.m-phone .kbd, body.m-phone kbd, body.m-phone .tk-hint { display: none !important; }
body.no-screen [data-show="screen"], body.no-screen [data-show="screencam"], body.no-screen [data-ls="screen"], body.no-screen [data-ls="screencam"], body.no-screen [data-add="screen"] { display: none !important; }
.m-flip svg { width: 24px !important; height: 24px !important; }
/* téléphone tenu en paysage : l'image prend la hauteur, le reste défile à côté */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --mtop: 52px; --mnav: 58px; }
  .topbar .brand small, .m-tag, .m-state span { display: none !important; }
  #mPgmSlot .m-ph { aspect-ratio: auto; height: calc(100dvh - var(--mtop) - var(--mnav) - 40px); max-width: calc((100dvh - var(--mtop) - var(--mnav) - 40px) * 16 / 9); margin: 0 auto; }
  #mNav span { display: none; }
}
.m-remote { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1.5px solid #f3c24f; background: linear-gradient(160deg, #3a2c0c, #1a1406); color: #fff; text-decoration: none; }
.m-remote span { grid-row: 1 / 3; font-size: 30px; text-align: center; } .m-remote b { font-size: 15.5px; color: #f3c24f; } .m-remote small { font-size: 12.5px; color: #e6d9b8; }
/* page Enregistrement : le gros bouton REC garde sa forme, le chrono passe dessous si besoin */
.rp-main { flex-wrap: wrap; gap: 12px !important; }
.rp-rec { flex: none !important; min-width: 128px !important; height: 64px !important; justify-content: center; font-size: 22px !important; }
.rp-rec i { flex: none; width: 24px !important; height: 24px !important; }
.rp-main > div { flex: 1 1 180px; } .rp-time { font-size: 30px !important; }
.rp-btns { flex-wrap: wrap; gap: 10px !important; } .rp-lv { flex: 1 1 100%; }
/* « Audio seul · Revenir à la vidéo » : juste au-dessus des commandes, jamais sur le titre de l'image */
.m-aud { top: auto !important; bottom: 74px; }
.rp-ctl .card-h { flex-wrap: wrap; gap: 8px; } .rp-ctl .card-h .mc-btn { margin-left: auto; }
.rp-btns { display: flex !important; flex-wrap: wrap !important; grid-template-columns: none !important; }
.rp-btns .rp-b { flex: 0 0 auto; } .rp-btns .rp-lv { flex: 1 1 100% !important; order: 9; margin-top: 6px; }
.rp-ctl .card-h .mc-btn span { display: none; } .rp-ctl .card-h .mc-btn { padding: 0 12px !important; }