/* ============================================================
   responsive-bottom.css — Macnor
   Corrections responsive : Blog, FAQ, CTA Final, global.
   Ne pas modifier style.css ni index.html.
   ============================================================ */

/* ── Empêche tout scroll horizontal ── */
html {
  overflow-x: hidden;
}
body {
  overflow-x: clip;
}

/* === GLOBAL SAFETY === */
img { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* Garantit un padding horizontal minimum sur les wrappers internes */
.blog-section__inner,
.faq__inner,
.cta-final__inner,
.confiance__inner {
  min-width: 0;
}

/* ============================================================
   BLOG
   ============================================================ */

/* Tablette : 2 colonnes */
@media (max-width: 1024px) {
  .blog-section {
    padding: 40px 32px;
  }

  .blog-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile large : 1 colonne */
@media (max-width: 768px) {
  .blog-section {
    padding: 40px 16px;
  }

  .blog-section__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card__img-wrap {
    height: 180px;
  }

  .blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Mobile étroit */
@media (max-width: 480px) {
  .blog-section {
    padding: 32px 16px;
  }

  .blog-section__title {
    font-size: clamp(20px, 6vw, 26px);
  }

  .blog-card__img-wrap {
    height: 160px;
  }

  .blog-card__body {
    padding: 16px;
  }

  .blog-card__title {
    font-size: 15px;
  }

  .blog-card__desc {
    font-size: 13px;
  }
}

/* ============================================================
   FAQ
   ============================================================ */

/* Mobile large — la grille (head + list) passe en colonne.
   Les règles de style.css couvrent déjà 768 px, on complète
   les valeurs manquantes. */
@media (max-width: 768px) {
  /* faq__inner passe déjà en 1 colonne via style.css — on
     s'assure que le padding horizontal est correct */
  .faq {
    padding: 64px 16px;
  }

  .faq__inner {
    gap: 32px;
  }

  .faq__question {
    font-size: 14px;
    padding: 18px 0;
    line-height: 1.4;
  }

  .faq__answer {
    font-size: 14px;
    line-height: 1.7;
    padding: 0 0 20px;
  }
}

/* Mobile étroit */
@media (max-width: 480px) {
  .faq {
    padding: 40px 16px;
  }

  .faq__title {
    font-size: clamp(22px, 7vw, 28px);
  }

  .faq__sub {
    font-size: 13px;
  }

  .faq__question {
    font-size: 13px;
    padding: 16px 0;
    gap: 12px;
  }

  .faq__answer {
    font-size: 13px;
    line-height: 1.65;
    padding: 0 0 18px;
  }
}

/* ============================================================
   CTA FINAL
   ============================================================ */

/* Mobile large — style.css couvre déjà padding, on complète */
@media (max-width: 768px) {
  .cta-final {
    padding: 48px 16px;
  }

  .cta-final__inner {
    padding: 48px 24px;
    border-radius: 24px;
    /* Empêche le débordement du gradient / box sur petits écrans */
    max-width: 100%;
    overflow: hidden;
  }

  .cta-final__sub {
    font-size: 14px;
  }

  .cta-final__actions {
    gap: 12px;
    flex-wrap: wrap;
  }
}

/* Mobile étroit — boutons en colonne, titre réduit */
@media (max-width: 480px) {
  .cta-final {
    padding: 32px 16px;
  }

  .cta-final__inner {
    padding: 40px 16px;
    border-radius: 20px;
  }

  .cta-final__title {
    font-size: clamp(22px, 7vw, 28px);
  }

  .cta-final__sub {
    font-size: 13px;
    margin-bottom: 28px;
  }

  .cta-final__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Cible les deux boutons dans .cta-final__actions quel que
     soit leur classe btn--* exacte */
  .cta-final__actions .btn {
    width: 100%;
    text-align: center;
    padding: 15px 16px;
  }
}

/* ============================================================
   GÉNÉRAL — gap et padding des sections internes
   ============================================================ */

@media (max-width: 768px) {
  /* Garantit un minimum de 16 px horizontal sur les sections
     qui utilisent 10 vw (= ~77 px sur 768 px mais peut chuter
     sur des écrans très petits). */
  .faq,
  .cta-final,
  .blog-section {
    padding-left: max(16px, 4vw);
    padding-right: max(16px, 4vw);
  }
}

@media (max-width: 480px) {
  .faq,
  .cta-final,
  .blog-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}