/* ============================================
   FlashFit — Responsive CSS Article Blog
   Breakpoints : tablet ≤ 767px | mobile ≤ 379px
   ============================================ */


/* ─── SITE HEADER ────────────────────────────── */

@media (max-width: 767px) {
  :root { --site-header-height: 88px; }
  body  { padding-top: 88px; }
}

@media (max-width: 379px) {
  :root { --site-header-height: 52px; }
  body  { padding-top: 52px !important; }
}


/* ─── ARTICLE WRAP ───────────────────────────── */

@media (max-width: 767px) {
  .article-wrap {
    padding: 0 16px;
    padding-top: 2rem;
  }

  .article-wrap h1 {
    font-size: 26px;
    overflow-wrap: break-word;
  }

  .back-link {
    padding: 20px 0 16px;
  }
}

@media (max-width: 379px) {
  .article-wrap h1 {
    font-size: 22px;
  }
}


/* ─── EXERCICES ──────────────────────────────── */

@media (max-width: 767px) {
  .exercise p {
    padding-left: 0;
  }

  .exercise-header {
    gap: 10px;
  }

  .exercise-num {
    font-size: 22px;
    min-width: 28px;
  }

  .exercise-header h2 {
    font-size: 16px;
  }
}


/* ─── CTA CARD ───────────────────────────────── */

@media (max-width: 767px) {
  .cta-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    min-height: auto;
  }

  .cta-right {
    height: 180px;
    order: -1;
  }

  .cta-left {
    padding: 24px 20px;
  }

  .cta-left h3 {
    font-size: 18px;
  }
}


/* ─── LIRE AUSSI ─────────────────────────────── */

@media (max-width: 767px) {
.lire-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .lire-card {
    padding: 12px;
  }

  .lire-card .lire-thumb {
    width: 56px;
    height: 56px;
  }

  .lire-card .lire-title {
    font-size: 12px;
  }
}