/* ============================================================
   BourseSavoir · Affinages MOBILE (≤ 600px)
   Chargé en DERNIER pour resserrer typo + espacements sur petit écran.
   Ne touche au desktop d'aucune façon.
   ============================================================ */

@media (max-width: 600px) {

  /* ---- Rythme vertical global : sections plus compactes ---- */
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 32px; }
  .stats { padding: 60px 0; }
  .stats-head { margin-bottom: 36px; }
  .cta-band { padding: 60px 0; }
  .cta-inner { padding: 38px 24px; border-radius: 22px; }
  .footer { padding: 48px 0 32px; }
  .footer-bottom { margin-top: 34px; }

  /* marge intérieure des conteneurs */
  .wrap { padding: 0 18px; }

  /* ---- HERO accueil ---- */
  .hero { min-height: auto; padding: 104px 0 56px; }
  .hero h1 { font-size: clamp(33px, 9.2vw, 41px); line-height: 1.04; letter-spacing: -0.025em; }
  .hero-sub { margin-top: 18px; font-size: 15px; line-height: 1.55; }
  .hero-badge { margin-bottom: 18px; font-size: 12px; padding: 7px 12px; }
  .hero-cta { margin-top: 26px; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* ---- HERO sous-pages (bandeau navy) ---- */
  .page-hero { padding: 96px 0 52px; }
  .page-hero h1 { font-size: clamp(32px, 8.8vw, 40px); margin-top: 16px; line-height: 1.04; }
  .page-hero .lead { margin-top: 16px; font-size: 15px; line-height: 1.55; }
  .page-hero .hero-proof { margin-top: 28px; }
  .page-hero .acc-tag { margin-top: 16px; }

  /* ---- Titres de section ---- */
  .section-head h2, .cmp-head h2, .stats-head h2 { font-size: clamp(26px, 7.4vw, 33px); }

  /* ---- Boutons : zones de tap confortables ---- */
  .btn { padding: 14px 22px; font-size: 15px; }

  /* ---- Cartes / blocs : padding resserré ---- */
  .calc { padding: 24px; border-radius: 18px; }
  .price-card { padding: 30px 26px; }
  .cta-inner { gap: 26px; }

  /* ---- Tableau comparatif : tient sur l'écran, sans scroll ---- */
  .cmp-scroll { overflow: visible; margin: 0; padding: 0; }
  .cmp-table { table-layout: fixed; width: 100%; min-width: 0; }
  .cmp-table col, .cmp-table th, .cmp-table td { word-break: normal; }
  .cmp-table th, .cmp-table td { padding: 11px 5px; }
  /* 1re colonne (intitulé) plus étroite, 3 colonnes offres plus larges et égales */
  .cmp-table thead th:first-child, .cmp-table tbody th { width: 34%; }
  .cmp-table thead th:not(:first-child), .cmp-table tbody td { width: 22%; }
  .cmp-table tbody th { font-size: 11.5px; white-space: normal; line-height: 1.25; padding-left: 0; }
  .cmp-table .colname { font-size: 11.5px; line-height: 1.15; white-space: normal; word-break: break-word; }
  .cmp-table .colprice { font-size: 10px; margin-top: 2px; }
  .cmp-table .colcap { font-size: 8.5px; padding: 3px 5px; margin-bottom: 6px; letter-spacing: .06em; }
  .cmp-table td .ck { width: 21px; height: 21px; }
  .cmp-table td .ck .ico { width: 13px; height: 13px; }

  /* ---- Pied de page : 2 colonnes lisibles ---- */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer .desc { max-width: none; }

  /* ---- Statistiques : chiffres un cran plus petits ---- */
  .stat .num { font-size: clamp(40px, 13vw, 60px); }

  /* ---- Accueil : masquer la frise parcours (trop longue sur tél.) ---- */
  .journey { display: none; }
}

/* Très petits téléphones (≤ 380px) : on resserre encore d'un cran */
@media (max-width: 380px) {
  .hero h1 { font-size: 31px; }
  .page-hero h1 { font-size: 30px; }
  .wrap { padding: 0 15px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}