/* =========================================================
   RETICEO — Correctifs responsive mobile
   Ciblage des grilles CSS inline (style="grid-template-columns…")
   qui ne se plient pas sur smartphones faute de @media dédiées.
   Appliqué globalement à toutes les pages produit.
   ========================================================= */

/* ── 768px — tablette portrait / grand smartphone paysage ── */
@media (max-width: 768px) {

  /* ── 4 colonnes → 2 ── */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 3 colonnes → 2 ── */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Bicolonne asymétrique (hero + layout) → 1 ── */
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1.15fr .85fr"],
  [style*="grid-template-columns:1.15fr .85fr"],
  [style*="grid-template-columns: 1.2fr .8fr"],
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns: 1.05fr .95fr"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns: 1.1fr .9fr"],
  [style*="grid-template-columns:1.1fr .9fr"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 420px"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns: 1fr 440px"],
  [style*="grid-template-columns:1fr 440px"],
  [style*="grid-template-columns: 3rem 1fr"],
  [style*="grid-template-columns:3rem 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 2 colonnes égales → 1 ── */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 5 colonnes → 2 ── */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── CTA band padding réduit ── */
  .cta-band { padding: 2.5rem 1.2rem !important; }

  /* ── Boutons CTA band pleine largeur ── */
  .cta-band-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-band-actions a,
  .cta-band-actions button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
  }

  /* ── Tableau comparatif : scroll horizontal ── */
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Section padding réduit ── */
  section { padding: 4rem 0; }
}

/* ── 480px — smartphones standard ── */
@media (max-width: 480px) {

  /* ── 4 col → 2 ── */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 3 col → 2 ── */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 5 col → 2 ── */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Typographie ── */
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }

  /* ── Padding container ── */
  .container { padding: 0 1rem; }

  /* ── Section padding minimum ── */
  section { padding: 3rem 0; }

  /* ── Boutons hero pleine largeur ── */
  .btn-gold, .btn-outline, .btn-primary, .btn-outline-white {
    min-width: unset;
  }
}