/* ═══════════════════════════════════════════════════════
   FRACTILIS — Responsive CSS (Portrait + Landscape)
   Foza Studio · 2026
   Remplace l'ancien landscape-responsive.css
   Le site fonctionne en portrait ET en paysage.
   Un message d'avertissement (non-bloquant) s'affiche
   en portrait sur mobile via fractilis-bg.js.
═══════════════════════════════════════════════════════ */

/* ─── Base mobile ─── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  section, .section {
    padding: 24px 0;
  }

  /* Navigation compacte */
  .nav { padding: 8px 12px; }
  .nav-logo span { font-size: 12px; }

  /* Touch targets minimum 44px */
  button, a, input, select, textarea {
    min-height: 44px;
  }
  input, select, textarea {
    font-size: 16px !important; /* Évite le zoom iOS */
  }

  /* Tables scrollables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grilles → 1 colonne */
  .grid-2, .row-2, .g2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Portrait spécifique ─── */
@media (max-width: 768px) and (orientation: portrait) {
  .nav-links { gap: 6px; }
  .hero-title { font-size: clamp(2rem, 10vw, 3.5rem); }
}

/* ─── Paysage mobile ─── */
@media (max-width: 900px) and (orientation: landscape) {
  section, .section { padding: 18px 0; }
  .nav { padding: 6px 12px; }
  .hero { min-height: 60vh; }
  .hero-title { font-size: clamp(1.8rem, 7vw, 3rem); }
}

/* ─── Très petit écran ─── */
@media (max-width: 380px) {
  .hero-title { font-size: clamp(1.6rem, 9vw, 2.5rem); }
  .dc-card { padding: 12px !important; }
}