/* styles/responsive/mobile-mode-config.css
 * ══════════════════════════════════════════════════════════════════
 * Couche mobile de l'écran MODE-CONFIG (+ modal multi).
 * Deux scopes distincts pour préserver le desktop au pixel :
 *   · (pointer:coarse)  → tailles de cibles tactiles ≥ 44px
 *   · (max-width:720px) → layout + font-size 16px anti-zoom iOS
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Cibles tactiles (tablettes + téléphones, souris intacte) ───── */
@media (pointer: coarse){
  /* Toggle SOLO/MULTI + bouton RÉGLAGES : hauteur confortable */
  .bt-toggle-btn{ padding:12px 22px; min-height:44px; }
  .svc-open{ min-height:44px; }

  /* Modal multi : croix de fermeture, onglets, champ pseudo */
  .mc-modal-close{
    width:44px; height:44px;
    top:6px; right:6px;
    font-size:15px;
    display:flex; align-items:center; justify-content:center;
  }
  .mc-mtab{ min-height:44px; }
  .mc-field-input{ min-height:44px; }

  /* Cases code du poster REJOINDRE : jamais sous 32×44px */
  .svc-join .bt-code-box{
    width:clamp(32px, 19cqw, 48px);
    height:clamp(44px, 26cqw, 60px);
  }
  .svc-join .bt-code-boxes{ gap:clamp(6px, 1.5cqw, 9px); }

  /* Input pseudo inline (bt/trace/hexa config) */
  .bt-pseudo-inline input{ min-height:44px; }
}

/* ─── Anti-zoom iOS : tout input focusable ≥ 16px sur mobile ─────── */
@media (max-width: 720px){
  .mc-field-input,
  .bt-pseudo-inline input{ font-size:16px; }

  /* Le champ pseudo prend la largeur dispo au lieu d'un min-width fixe
   * de 240px (déborde à 320px avec les paddings). */
  .bt-pseudo-inline{ width:100%; max-width:360px; padding:0 12px; }
  .bt-pseudo-inline input{ min-width:0; width:100%; }

  /* Modal multi : padding qui respire à 320px */
  .mc-modal{ padding:clamp(20px, 5vw, 32px) clamp(16px, 4.5vw, 28px) clamp(18px, 4.5vw, 28px); }
}

/* ─── Focus visible restauré (les inputs posent outline:none) ────── */
.mc-field-input:focus-visible,
.mc-code-box:focus-visible,
.bt-code-box:focus-visible,
.bt-pseudo-inline input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}