/* mobile-tweaks.css — corrections d'accessibilite mobile.
   Chargee uniquement sur les pages outils principales.
   Cibles : buttons trop petits, inputs qui zooment sur iOS, overflow horizontal. */
@media (max-width: 768px) {
  /* Touch targets : Apple Human Interface Guidelines + Material recommandent
     44x44px minimum. Beaucoup de boutons existants sont a ~32-36px. */
  button,
  .dl-btn,
  .gen-btn,
  .preset-btn,
  .font-btn,
  .input-mode-tab,
  .nav-dropdown-toggle,
  .nav-btn-bb-toggle,
  .nav-btn-bb,
  .btn-primary,
  .btn-nav,
  a.dl-btn,
  a.btn-primary {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Inputs : iOS zoome automatiquement quand un input < 16px est focused.
     Force 16px pour empecher ce zoom intempestif. */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Slider range : difficile a manipuler avec le doigt si trop fin */
  input[type="range"] {
    min-height: 32px;
  }

  /* Empeche le scroll horizontal accidentel (cause #1 de mauvaise UX mobile) */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Resultat preview : eviter qu'un canvas tres large debord */
  .result-preview,
  .result-slider,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* Hero text : eviter les titres trop petits sur smartphone */
  .hero h1 {
    font-size: clamp(1.65rem, 7vw, 2.4rem) !important;
    line-height: 1.15;
  }
  .hero p,
  .hero .subtitle {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Espacements verticaux : aerer les boutons d'action pour eviter mis-clics */
  .result-actions {
    gap: 12px;
    flex-direction: column;
  }
  .result-actions > * {
    width: 100%;
  }

  /* Modales : empecher qu'elles depassent du viewport */
  .email-overlay .email-modal,
  .us-eg-box {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}