/* Salty Communication — surcouche responsive mobile & tablette
   Breakpoints : 1024 (tablette) / 768 (mobile) / 480 (petit mobile) */

/* ===== Anti-débordement horizontal (toutes tailles) ===== */
html, body { max-width: 100%; }
@media (max-width: 1024px) { html, body { overflow-x: hidden; } }

/* ===== Burger (masqué sur desktop) ===== */
.salty-burger { display: none; }
.salty-mobile-menu { display: none; }

@media (max-width: 1024px) {
  /* conteneur : plus de largeur mini desktop */
  [style*="min-width: 1280px"] { min-width: 0 !important; }
  [style*="min-width:1280px"] { min-width: 0 !important; }

  /* ---------- HEADER : logo + burger ---------- */
  header > div, header { padding-left: 20px !important; padding-right: 20px !important; }
  header nav { display: none !important; }
  header img { height: 44px !important; }

  .salty-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 11px; margin-left: auto;
    background: transparent; border: 0; cursor: pointer; border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .salty-burger span {
    display: block; width: 24px; height: 2.5px; background: #111; border-radius: 2px;
    transition: transform .28s ease, opacity .2s ease;
  }
  .salty-burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .salty-burger.is-open span:nth-child(2) { opacity: 0; }
  .salty-burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ---------- Panneau déroulant ---------- */
  .salty-mobile-menu {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    background: #fff; border-bottom: 1px solid #eee;
    box-shadow: 0 22px 44px rgba(0,0,0,.14);
    padding: 10px 20px 22px;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease;
    max-height: 82vh; overflow-y: auto;
  }
  .salty-mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .salty-mobile-links { display: flex; flex-direction: column; }
  .salty-mobile-links a {
    display: flex; align-items: center; min-height: 52px; padding: 6px 4px;
    font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px; font-weight: 600; color: #111 !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .salty-mobile-links a:hover { color: #2056BD !important; }
  .salty-mobile-cta { margin-top: 16px; }
  .salty-mobile-cta a {
    display: flex; align-items: center; justify-content: center; min-height: 52px;
    background: #2056BD; color: #fff !important; border-radius: 999px;
    font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px; font-weight: 700; text-align: center;
  }

  /* ---------- Rythme vertical + gouttières ---------- */
  section { padding-left: 20px !important; padding-right: 20px !important; }
  footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---------- Grilles : tout empile en 1 colonne ---------- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* grilles de cartes : 2 colonnes (2 éléments visibles) */
  [style*="repeat(4, 1fr)"], [style*="repeat(3, 1fr)"], [style*="repeat(6, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(3,1fr)"], [style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important;
  }

  /* ---------- Rangées texte + image : TEXTE d'abord, image ensuite ---------- */
  [style*="aspect-ratio: 4 / 5"], [style*="aspect-ratio: 16 / 9"],
  [style*="aspect-ratio: 4/5"], [style*="aspect-ratio: 16/9"] { order: 2 !important; }
  [style*="aspect-ratio: 4 / 5"], [style*="aspect-ratio: 4/5"] { max-width: 440px; margin-left: auto !important; margin-right: auto !important; }

  /* ---------- Carrousels : ~2 éléments visibles + aperçu du 3e ---------- */
  /* Reels (piste défilante) */
  [style*="flex: 0 0 280px"] {
    flex: 0 0 42vw !important; width: 42vw !important; height: calc(42vw * 1.78) !important;
    margin-right: 14px !important;
  }
  /* Logos clients (marquee) */
  [style*="width: 200px"][style*="height: 120px"] { width: 42vw !important; margin-right: 18px !important; }
  /* Cartes projets (marquee home) */
  [style*="width: 330px"] { width: 62vw !important; margin-right: 16px !important; }
  /* Avis Google (piste défilante) */
  [style*="(100% - 72px) / 4"], [style*="(100% - 72px)/4"] { flex: 0 0 76vw !important; }
  /* flèches d'avis : évitent le débordement */
  [aria-label="Avis précédents"], [aria-label="Avis suivants"] { display: none !important; }

  /* ---------- FOOTER : reste sur une seule rangée horizontale ---------- */
  footer > div[style*="grid-template-columns"] {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 14px !important; grid-template-columns: none !important;
  }
  footer > div[style*="grid-template-columns"] > div { flex: 1 1 0; min-width: 0; }
  footer h4 { font-size: 12px !important; margin-bottom: 12px !important; }
  footer p, footer a { font-size: 12px !important; }
  footer [style*="max-width: 300px"] { max-width: none !important; }

  /* ---------- Nav flottant des services : masqué ---------- */
  [style*="top: 112px"][style*="position: fixed"] { display: none !important; }

  /* ---------- Blocs larges fixes ---------- */
  [style*="width: 780px"] { width: calc(100vw - 40px) !important; padding: 30px 22px !important; }
  [style*="max-height: 640px"] > div:nth-child(n+2) { display: none !important; }
  [style*="max-height: 640px"] > div { width: 100% !important; max-width: 460px; }
}

/* ===== MOBILE (≤768) : typographie ===== */
@media (max-width: 768px) {
  h1 { font-size: 42px !important; line-height: 1.08 !important; }
  h2 { font-size: 30px !important; }
  h3 { font-size: 20px !important; }
  header img { height: 42px !important; }
  footer h4 { font-size: 11px !important; }
  footer p, footer a { font-size: 11px !important; }
}

/* ===== PETIT MOBILE (≤480) ===== */
@media (max-width: 480px) {
  h1 { font-size: 34px !important; }
  h2 { font-size: 26px !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  header img { height: 36px !important; }
  /* on garde 2 colonnes pour les cartes (2 éléments visibles demandés) */
  [style*="repeat(4, 1fr)"], [style*="repeat(3, 1fr)"], [style*="repeat(6, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(3,1fr)"], [style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="flex: 0 0 280px"] { flex: 0 0 46vw !important; width: 46vw !important; height: calc(46vw * 1.78) !important; }
  footer > div[style*="grid-template-columns"] { gap: 10px !important; }
  footer h4 { font-size: 10px !important; letter-spacing: .04em !important; }
  footer p, footer a { font-size: 10px !important; }
}