/* css/responsive.css
   ÉTAPE 23 — Ajustements responsive (mobile / tablette / desktop) et
   gestion du clavier virtuel. Chargé en dernier pour pouvoir surcharger
   les autres feuilles de style via des media queries. */

/* ---------- Desktop / tablette : rendre l'app "app-like" ----------
   Sur grand écran, on centre un cadre façon smartphone plutôt que
   d'étirer l'interface sur toute la largeur (section 20 : ne pas
   ressembler à un site web classique). */
@media (min-width: 720px) {
  body {
    /* Couleur pleine plutôt qu'un dégradé : le cadre du téléphone doit
       rester le point focal, pas le fond derrière lui. */
    background: #efe4d6;
  }

  #app {
    max-width: var(--app-max-width);
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: var(--shadow-lg);
    background: var(--color-bg);
  }
}

@media (min-width: 720px) and (min-height: 640px) {
  #app {
    margin: var(--space-8) auto;
    min-height: calc(100vh - var(--space-16));
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}

/* ---------- Petits écrans : resserrer certains espacements ---------- */
@media (max-width: 360px) {
  .logo-text,
  .auth-logo .logo-text {
    font-size: var(--fs-2xl);
  }

  .call-circle-main {
    width: min(66vw, 260px);
    height: min(66vw, 260px);
  }
}

/* ---------- Clavier virtuel mobile ----------
   `100dvh` (utilisé sur .screen-match et #app) s'ajuste déjà
   automatiquement à la hauteur visible quand le clavier apparaît sur les
   navigateurs qui le supportent (Chrome/Safari récents). Pour les
   navigateurs plus anciens sans support de dvh, on garde 100vh en repli
   (déjà déclaré avant dvh dans reset.css : la dernière valeur valide
   gagne). */
@supports not (height: 100dvh) {
  .screen-match,
  #app {
    height: 100vh;
  }
}

/* Évite que le cadre d'appel ne pousse les contrôles hors écran sur les
   très petites hauteurs (mode paysage mobile). */
@media (max-height: 480px) {
  .call-circle-main {
    width: min(50vh, 220px);
    height: min(50vh, 220px);
  }
}

/* ---------- Accessibilité : mouvement réduit ----------
   (renforce ce qui est déjà dans reset.css pour les animations propres à
   ce fichier / aux composants ajoutés après) */
@media (prefers-reduced-motion: reduce) {
  .btn-fab,
  .call-circle,
  .reaction-float,
  .modal,
  .modal-overlay,
  .toast {
    animation: none !important;
  }
}