/* ===================================================================
   My Little Côte d'Azur — couche responsive
   L'artboard d'origine est desktop seul (aucune media query) et tout
   est en style inline : d'où les !important.

   Piège découvert en vérifiant au navigateur : le runtime de la maquette
   réécrit chaque attribut `style` au chargement, et le sérialiseur du
   navigateur normalise alors la syntaxe avec un espace après les deux-
   points ("pointer-events: auto" au lieu de "pointer-events:auto" écrit
   dans le fichier source). Tout sélecteur `[style*="propriete:valeur"]`
   doit donc exister en DEUX variantes (avec et sans l'espace) pour
   fonctionner de façon fiable — sinon il ne matche jamais rien.
   =================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }
img, iframe, canvas, video { max-width: 100%; }

/* ── Tablette : toute grille à 4 colonnes ou plus passe à 2 ── */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr 1fr auto"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr auto"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="minmax(0px, 0.72fr)"],
  [style*="minmax(0px,0.72fr)"] { grid-template-columns: 1fr !important; }
}

/* ── Mobile ── */
@media (max-width: 760px) {
  /* Règle générale : sur mobile, toute grille devient une colonne.
     Ce sélecteur n'a pas de deux-points dans sa valeur : il matche déjà
     dans les deux graphies, sans variante nécessaire. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Le conteneur d'en-tête passe en multi-lignes pour libérer la nav */
  header > div { flex-wrap: wrap !important; gap: 10px 16px !important; padding: 12px 18px !important; }

  /* En-tête : la navigation reste sur UNE ligne, défilable au doigt */
  nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    order: 3;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0 2px !important;
    -webkit-overflow-scrolling: touch;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap !important; font-size: 14px !important; }

  /* Titres */
  h1 { font-size: clamp(1.9rem, 8vw, 2.7rem) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(1.45rem, 5.6vw, 2rem) !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(1.1rem, 4.4vw, 1.45rem) !important; }

  /* Grands paddings desktop resserrés (les deux graphies) */
  [style*="padding:64px"], [style*="padding: 64px"],
  [style*="padding:72px"], [style*="padding: 72px"],
  [style*="padding:80px"], [style*="padding: 80px"],
  [style*="padding:96px"], [style*="padding: 96px"],
  [style*="padding:120px"], [style*="padding: 120px"] { padding: 40px 20px !important; }

  /* Le panneau de discussion (z-index 150) ne recouvre plus tout l'écran */
  [style*="z-index:150"], [style*="z-index: 150"] {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    max-height: 58vh !important;
    bottom: 88px !important;
  }

  /* Cibles tactiles */
  select, input, button, textarea { min-height: 44px; font-size: 16px !important; }

  /* ── Boutons du hero : jamais de texte replié sur 2-3 lignes ──
     La ligne des deux CTA ("Découvrir nos biens" / "Estimation...")
     est le seul élément avec `pointer-events:auto` inline — on peut la
     cibler sans ambiguïté, dans ses deux graphies possibles. */
  [style*="pointer-events:auto"], [style*="pointer-events: auto"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  [style*="pointer-events:auto"] > div,
  [style*="pointer-events: auto"] > div {
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) {
  [style*="padding:40px"], [style*="padding: 40px"],
  [style*="padding:48px"], [style*="padding: 48px"],
  [style*="padding:56px"], [style*="padding: 56px"] { padding: 28px 18px !important; }
  nav { gap: 16px !important; }
  nav a { font-size: 13.5px !important; }
}

/* ── Mode « embarqué » : la page tourne dans le téléphone de la landing.
      On replie l'assistant pour ne pas masquer le hero. La bulle reste. ── */
html[data-embed] [style*="z-index:150"],
html[data-embed] [style*="z-index: 150"] { display: none !important; }
html[data-embed] ::-webkit-scrollbar { width: 0; height: 0; }