/* mobile.css — couche responsive ADDITIVE. Chargée APRÈS main.css.
   Règle absolue : uniquement des blocs @media (max-width). Aucune règle
   desktop hors media query. !important autorisé ici (et seulement ici)
   pour battre les styles inline. Desktop = intouché par construction. */

@media (max-width: 768px) {
  /* Anti-débordement : CONTENIR sans MASQUER.
     overflow-x:hidden coupait le contenu débordant en portrait sans laisser
     de barre de défilement -> retiré. On plafonne les médias et on coupe les
     longues chaînes ; si un élément déborde encore, le scroll reste possible. */
  img, video, table, iframe { max-width: 100% !important; height: auto; }
  body { overflow-wrap: break-word; word-wrap: break-word; }
}

/* --- Menu hamburger (public + app) ---
   Bouton et panneau portent style="display:none" inline → invisibles en desktop.
   Ici (media only) on les force visibles via !important (bat l'inline sans !important). */
@media (max-width: 768px) {
  nav.navbar-main { position: relative; }
  .mobile-nav-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1;
    cursor: pointer; padding: 0.2rem 0.5rem;
  }
  .mobile-nav-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #041021; flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); z-index: 999;
  }
  .mobile-nav-panel.open { display: flex !important; }
  .mobile-nav-panel a {
    padding: 0.9rem 1.25rem; color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.95rem;
  }
  /* Barre admin : pas de hamburger, on laisse la nav passer à la ligne */
  .admin-topnav { flex-wrap: wrap !important; gap: 0.6rem 0 !important; }
  .admin-topnav-links { flex-wrap: wrap !important; gap: 0.65rem 1rem !important; }
}

/* --- Overrides génériques (T2) : modes de casse communs, traités une fois ---
   Tout media-scoped → desktop intouché. Choix prudents :
   - grille multi-colonnes -> 1 colonne : quasi toujours correct sur mobile.
   - flex -> wrap : au pire les éléments s'empilent, jamais de débordement.
   - on NE touche PAS aux largeurs px en aveugle (risque de matcher des %). */
@media (max-width: 768px) {
  /* Grilles -> une colonne (classes réelles + inline) */
  .features-grid, .usecases-grid, .pricing-grid, .cards-grid, .grid,
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Rangées flex -> passage à la ligne (évite le débordement horizontal) */
  [style*="display:flex"], [style*="display: flex"], .setup-steps { flex-wrap: wrap !important; }

  /* Anti-débordement global (couvre toutes les surfaces) :
     - plafonne toute largeur (fixe ou non) au conteneur, sans jamais agrandir ;
     - lève les min-width px qui empêchent un enfant flex de rétrécir. */
  [style*="width:"] { max-width: 100% !important; }
  [style*="min-width"] { min-width: 0 !important; }

  /* Champs de formulaire et boutons pleine largeur (apparence seule, jamais les name=) */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { max-width: 100% !important; box-sizing: border-box; }

  /* Tableaux : défilables plutôt que casser la page */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Respiration : paddings latéraux desktop réduits sur les conteneurs standard */
  .page-content, main, section { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* --- Correctifs ciblés (navbar, hero landing, grilles) --- */
@media (max-width: 768px) {
  /* Hamburger : forcer blanc — color:inherit rendait le ☰ sombre, invisible
     sur la navbar navy (public ET app). */
  .mobile-nav-btn { color: #fff !important; }

  /* Hero : en colonne, main.css oublie de réinitialiser align-items:flex-start,
     donc .hero-content prend la largeur de son plus large enfant (> écran) et
     déborde, coupé par .hero{overflow:hidden}. On force les enfants pleine largeur. */
  .hero-inner { align-items: stretch !important; }
  .hero-content { width: 100% !important; min-width: 0 !important; }
  .hero-actions { justify-content: center !important; }
  .demo-phone-strip { flex-wrap: wrap !important; justify-content: center; max-width: 100%; }

  /* Généralisation à tous les templates : toute grille (*-grid) -> une colonne */
  [class*="-grid"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Typo : titres géants desktop ramenés à une taille lisible sur petit écran */
  h1 { font-size: 1.6rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.3rem !important; line-height: 1.3 !important; }
}