/* ============================================================
   Correctifs RESPONSIVE des pages vitrine (memopolis.fr).
   Les 43 pages sont générées avec des styles inline : cette
   feuille les surcharge via sélecteurs d'attribut + !important.
   Chargée par toutes les pages (<link> avant </head>).
   ============================================================ */

img { max-width: 100%; height: auto; }

/* ---------- Header (≤ 900px) : logo compact, liens repliés, CTA en bandeau ---------- */
@media (max-width: 900px) {
  /* Sticky supprimé : replié sur 3 rangées, il mangerait le tiers de l'écran. */
  header[style*="position:sticky"] { position: static !important; }
  header img[style*="height:140px"] { height: 72px !important; }
  header > div[style*="max-width:1240px"] {
    flex-wrap: wrap !important;
    gap: 6px 18px !important;
    padding: 8px 14px !important;
  }
  /* Le logo passe en tête, seul sur sa rangée, centré. */
  header > div[style*="max-width:1240px"] > a[style*="flex-shrink:0"] {
    order: -1;
    flex-basis: 100%;
    display: flex !important;
    justify-content: center;
  }
  /* Les deux groupes de liens se partagent une rangée repliable. */
  header div[style*="flex:1"] {
    flex: 0 1 auto !important;
    justify-content: center !important;
    font-size: 15px !important;
    gap: 14px !important;
  }
  /* Le bouton « Commencer à jouer » quitte l'absolu (il chevauchait les liens). */
  header a[href="/connexion"][style*="position:absolute"] {
    position: static !important;
    display: table !important;
    margin: 10px auto 2px !important;
    font-size: 14px !important;
    padding: 8px 18px !important;
  }
}

/* ---------- Tablette (641-1000px) : les séries de 4/5 cartes se replient ---------- */
@media (min-width: 641px) and (max-width: 1000px) {
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
}

/* ---------- Mobile (≤ 640px) : plus aucune colonne forcée ---------- */
@media (max-width: 640px) {
  /* Les rangées flex replient au lieu de déborder de l'écran. */
  [style*="display:flex"] { flex-wrap: wrap; }

  /* Toutes les grilles multi-colonnes passent en 1 colonne… */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* …sauf les séries de petites cartes (4/5 colonnes) : 2 colonnes lisibles. */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Titres surdimensionnés → à l'échelle du petit écran. */
  h1 { font-size: clamp(28px, 8.6vw, 38px) !important; letter-spacing: -.6px !important; }
  h2 { font-size: clamp(23px, 6.8vw, 30px) !important; }
  [style*="font-size:46px"],
  [style*="font-size:44px"],
  [style*="font-size:40px"] { font-size: clamp(26px, 8vw, 34px) !important; }
  [style*="font-size:36px"] { font-size: clamp(24px, 7vw, 30px) !important; }

  /* Héros : le voile dégradé horizontal ne couvre que la gauche — sur mobile le texte
     occupe toute la largeur, on passe à un voile quasi plein pour rester lisible. */
  div[style*="linear-gradient(90deg,rgba(243,241,234"] { background: rgba(243, 241, 234, .88) !important; }

  /* Les débordements résiduels ne créent pas d'ascenseur horizontal. */
  body { overflow-x: hidden; }
}