/* Ajustements mobiles.

   Ce fichier ne surcharge plus l'échelle typographique. Les rôles de
   base.css sont en clamp() : ils se réduisent déjà d'eux-mêmes avec la
   largeur, et les valeurs en pixels qui vivaient ici les écrasaient. Elles
   descendaient le corps de texte à 13px, sous le plancher de lisibilité
   que design.md §1 fixe pour une audience de 55 à 70 ans, et faisaient
   passer certains titres de carte sous la taille de leur propre
   sous-titre.

   Les sélecteurs .nav, .grid-2, .grid-3, .footer-content, .card,
   .form-input, .form-textarea, .form-select et .section qui occupaient la
   moitié du fichier ne correspondaient à aucun élément d'aucune page. */

@media (max-width: 768px) {
  :root {
    /* Seul l'espacement se resserre, et modérément : design.md §5 rappelle
       que le manque d'air est ce qui fait d'abord paraître une page
       bricolée. */
    --spacing-xl: 24px;
    --spacing-2xl: 40px;
  }

  /* Marges latérales de 24px en mobile (design.md §5) */
  .container {
    padding: 0 var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  /* Le mark rétrécit déjà dans components.css ; le mot suit. */
  .logo {
    font-size: var(--font-size-lg);
  }
}