/* ═══════════════════════════════════════════════════════════════
   KLYVIO AUDIT — CORRECTIF MOBILE
   ───────────────────────────────────────────────────────────────
   Les titres agrandis le 28/07 (54, 46, 48, 56, 38, 30 px) n'avaient
   aucune règle de réduction sur mobile : les media queries de
   tokens.css ciblent les anciennes valeurs (44 px, 72 px) via des
   sélecteurs d'attribut, donc elles ne matchaient plus.

   Ce fichier se charge APRÈS tokens.css et ne fait qu'ajouter les
   règles manquantes. tokens.css n'est pas modifié.

   ⚠️  Si tu changes à nouveau la taille d'un titre dans un .jsx,
       ajoute la règle correspondante ici.
   ═══════════════════════════════════════════════════════════════ */


/* ─── Tablette et petit portable ─────────────────────────────── */
@media (max-width: 960px) {

  /* Report — « Votre niveau : Exploration. » */
  h1.display[style*="font-size: 56px"] { font-size: 36px !important; }

  /* Landing — « Un processus léger… » / « 7 dimensions… » */
  h2.display[style*="font-size: 54px"] { font-size: 34px !important; }

  /* Onboarding — « Faisons connaissance. » */
  h1.display[style*="font-size: 48px"] { font-size: 32px !important; }

  /* Landing « Prêt à démarrer ? » + Onboarding « Un rapport qui vaut… » */
  h2.display[style*="font-size: 46px"],
  h3.display[style*="font-size: 46px"] { font-size: 30px !important; }

  /* Report — « Ce que votre audit révèle. » */
  h1.display[style*="font-size: 38px"],
  h2.display[style*="font-size: 38px"],
  h3.display[style*="font-size: 38px"] { font-size: 27px !important; }

  /* Report / ReportTabs — sous-sections (Par où commencer, Vos 7 dimensions…) */
  h2.display[style*="font-size: 30px"],
  h3.display[style*="font-size: 30px"] { font-size: 24px !important; }
}


/* ─── Téléphone ──────────────────────────────────────────────── */
@media (max-width: 720px) {

  h1.display[style*="font-size: 56px"] { font-size: 30px !important; }

  h2.display[style*="font-size: 54px"] { font-size: 28px !important; }

  h1.display[style*="font-size: 48px"] { font-size: 27px !important; }

  h2.display[style*="font-size: 46px"],
  h3.display[style*="font-size: 46px"] { font-size: 26px !important; }

  h1.display[style*="font-size: 38px"],
  h2.display[style*="font-size: 38px"],
  h3.display[style*="font-size: 38px"] { font-size: 23px !important; }

  h2.display[style*="font-size: 30px"],
  h3.display[style*="font-size: 30px"] { font-size: 21px !important; }

  /* Le compteur de question ne doit pas passer à la ligne */
  h2.display[style*="font-size: 44px"] { font-size: 26px !important; }
}


/* ─── Petit téléphone ────────────────────────────────────────── */
@media (max-width: 400px) {

  h1.display[style*="font-size: 72px"] { font-size: 32px !important; }
  h1.display[style*="font-size: 56px"] { font-size: 27px !important; }
  h2.display[style*="font-size: 54px"] { font-size: 25px !important; }
  h1.display[style*="font-size: 48px"] { font-size: 25px !important; }

  h2.display[style*="font-size: 46px"],
  h3.display[style*="font-size: 46px"] { font-size: 24px !important; }
}