/* styles/utilities/responsive.css — responsive global media queries.
 * Nettoyé Phase 4 : retiré les overrides pour les classes supprimées
 * en Phase 1 (ère cyan/RATP + ère reveal mort). Seuls les sélecteurs
 * encore vivants dans le DOM actuel restent ici. */

/* ================================== RESPONSIVE ==================== */

/* ---- Tablet (≤ 720px) ---- */
@media (max-width:720px){
  .view{padding:20px 16px}

  /* Multi */
  .multi-cards{grid-template-columns:1fr}

  /* Game bar */
  .game-bar{font-size:10px}
  .brand-home{font-size:11px;letter-spacing:.15em}

  /* Board */
  .board{min-height:320px}
  .station-card{padding:10px 14px;min-width:110px}
  .station-card-name{font-size:15px}
  .line-circle{width:50px;height:50px}
  .conn-add-btn{width:18px;height:18px;font-size:12px}

  /* Action bar */
  .action-bar{gap:8px;padding:12px 0 6px}
  .btn{padding:10px 16px;font-size:10px}

  /* Popover — constrain width */
  .popover{min-width:0;max-width:calc(100vw - 24px);width:calc(100vw - 24px)}

  /* Reveal inline bar (`.ri-*` : INCERTAIN, conservé) */
  .reveal-inline-bar{gap:12px;padding:8px 12px}
  .ri-rank{padding-right:10px}
  .ri-rank-letter{font-size:28px}
  .ri-metrics{gap:12px}
  .ri-v{font-size:15px}
  .ri-continue{padding:8px 14px}

  /* Map reveal bar */
  .map-reveal-bar{gap:10px;padding:10px 14px}
  .map-marker-name{font-size:10px;padding:1px 5px}
  /* Scoreboard : responsive géré dans styles/views/scoreboard.css (.sb-*) */
}

/* ---- Mobile (≤ 480px) ---- */
@media (max-width:480px){
  .view{padding:14px 10px}

  /* Screen label */
  .screen-label{font-size:10px;letter-spacing:.28em;padding:4px 12px}

  /* Game header — simplified for small screens */
  .game-bar{font-size:9px;padding:0 0 10px}
  .brand-home{font-size:10px;letter-spacing:.12em}
  .game-bar-center{position:static;transform:none;flex:1;justify-content:center}
  .game-bar-sep{margin:0 4px}
  .theme-toggle-bar{width:26px;height:26px;font-size:12px}

  /* Board */
  .board{min-height:260px}
  .game-stage{padding:12px 0}
  .station-card{padding:8px 10px;min-width:90px;border-radius:10px}
  .station-card-name{font-size:13px}
  .station-card-tag{font-size:8px;letter-spacing:.2em}
  .station-card-mode{font-size:8px}
  .line-circle{width:42px;height:42px}
  /* Mobile : on REDIMENSIONNE sans re-injecter de padding global (le
   * padding casserait le cercle des métros). Le padding horizontal
   * reste porté par `.chip.rer` et `.chip.walk` via chip.css. */
  .chip{ min-width:24px; height:24px; font-size:11px }
  .chip.rer,
  .chip.walk{ padding:0 6px }
  .chip.mini{ min-width:18px; height:18px; font-size:9px }
  .chip.mini.rer,
  .chip.mini.walk{ padding:0 4px }
  .conn-add-btn{width:16px;height:16px;font-size:11px}

  /* Board toolbar */
  .board-toolbar{top:6px;left:6px;padding:2px}
  .board-tool-btn{width:28px;height:28px;border-radius:6px;font-size:10px}
  .board-tool-btn .tool-icon{font-size:13px}

  /* Action bar — stack buttons */
  .action-bar{
    flex-direction:column;align-items:stretch;
    gap:6px;padding:8px 0 4px;
  }
  .btn{width:100%;text-align:center;padding:12px 16px;font-size:10px}
  .btn.primary{order:-1}

  /* Popover → bottom-sheet on mobile */
  .popover{
    position:fixed !important;
    bottom:0 !important;top:auto !important;
    left:0 !important;right:0 !important;
    width:100% !important;max-width:100% !important;
    border-radius:16px 16px 0 0;
    max-height:70vh;overflow-y:auto;
    padding:20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    box-shadow:0 -20px 60px rgba(0,0,0,.7);
    animation:sheet-up .25s ease both;
  }
  @keyframes sheet-up{
    from{transform:translateY(100%);opacity:0}
    to{transform:translateY(0);opacity:1}
  }
  .popover .sugg{max-height:35vh}
  .popover .station-input{font-size:16px}
  .popover .line-menu-row{gap:8px}
  .popover .line-menu-row .chip{ min-width:34px; height:34px; font-size:14px }
  .popover .line-menu-row .chip.rer,
  .popover .line-menu-row .chip.walk{ padding:0 10px }

  /* Reveal inline bar (INCERTAIN, conservé) */
  .reveal-inline-bar{
    gap:8px;padding:8px 10px;
    flex-direction:column;align-items:stretch;text-align:center;
  }
  .ri-rank{padding-right:0;border-right:none;border-bottom:1px solid var(--border);padding-bottom:8px;justify-content:center}
  .ri-metrics{justify-content:center;gap:16px}
  .ri-continue{align-self:center}

  /* Map reveal */
  .map-reveal-bar{
    gap:8px;padding:8px 10px;
    flex-direction:column;align-items:stretch;text-align:center;
  }
  .map-reveal-bar .ri-rank{padding-right:0;border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;justify-content:center}
  .map-reveal-bar .ri-metrics{justify-content:center;gap:14px}
  .map-reveal-bar .ri-continue{align-self:center}
  .map-line-badge{width:22px;height:22px;font-size:10px}
  .map-marker-tag{font-size:8px}
  .map-marker-name{font-size:9px;padding:1px 4px}
  .map-marker::after{width:10px;height:10px}

  /* Scoreboard : responsive géré dans styles/views/scoreboard.css (.sb-*) */

  /* Toast */
  .toast{bottom:20px;padding:10px 18px;font-size:10px}
}

/* ---- Touch device improvements ---- */
@media (hover:none){
  /* Hide hover-only tooltips on touch */
  .line-circle:not(.filled)::after{display:none}
  .conn-add-btn.visible::after{display:none}

  /* …sauf le coaching 1re manche : pas de survol sur tactile, donc on
     garde le tooltip natif affiché d'emblée jusqu'au tap de l'action. */
  .line-circle.coach-hint::after,
  .conn-add-btn.coach-hint::after{display:block;opacity:1}

  /* Always show "+" buttons on touch — no hover to reveal them */
  .conn-add-btn{opacity:.6 !important;pointer-events:auto !important}

  /* Make tap targets generous */
  .conn-add-btn{width:28px;height:28px;font-size:16px}

  /* Prevent board from capturing scroll gestures accidentally */
  .board{touch-action:pan-x pan-y}
}