/*
 * shared/responsive.css
 * Responsive layout global - XMLBridge
 * Couvre : mobile (< 480px), petits phones (480-600px), tablettes (600-900px),
 *          grands ecrans (900-1280px), tres grands ecrans (> 1280px)
 */

/* =============================================
   BASE FLUIDE - s'applique a toutes les tailles
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Contenu principal - fluid avec padding proportionnel */
.page-content,
.page-layout,
main,
.wrap,
.container {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(12px, 3vw, 40px) clamp(12px, 4vw, 60px) clamp(60px, 8vw, 100px);
  box-sizing: border-box;
}

/* Nav - padding fluide */
.nav-inner {
  width: 100%;
  padding: 0 clamp(12px, 3vw, 40px);
  box-sizing: border-box;
}

/* Footer - padding fluide */
.xb-footer-inner {
  padding: clamp(28px, 5vw, 56px) clamp(12px, 4vw, 48px) clamp(20px, 3vw, 40px) !important;
}
.xb-footer-bottom {
  padding: 14px clamp(12px, 4vw, 48px) 20px !important;
}

/* Panels */
.panel {
  padding: clamp(14px, 2.5vw, 24px);
  border-radius: clamp(10px, 1.5vw, 16px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

/* Titres fluides */
.page-title {
  font-size: clamp(16px, 3.5vw, 24px) !important;
}
.page-subtitle {
  font-size: clamp(11px, 1.8vw, 14px) !important;
}

/* Grilles de champs - auto-adapt */
.field-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  gap: clamp(8px, 1.5vw, 12px) !important;
}
.field-row-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
  gap: clamp(8px, 1.5vw, 12px) !important;
}

/* Grille resume / stats */
.summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
  gap: clamp(8px, 1.5vw, 14px) !important;
}

/* Boutons */
.btn-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(6px, 1.5vw, 10px) !important;
}

/* Tables - toujours scrollables horizontalement */
.lines-table-wrap,
.sepa-table-wrap,
.nacha-table-wrap,
[class*="-table-wrap"],
[class*="table-wrap"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Inputs et selects - lisibles sur tous ecrans */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
}

/* =============================================
   TRES GRANDS ECRANS (> 1600px)
   ============================================= */
@media (min-width: 1600px) {
  .page-content {
    padding: 48px 80px 100px;
  }
  .panel {
    padding: 28px;
  }
  .page-title { font-size: 26px !important; }
}

/* =============================================
   GRANDS ECRANS (1280px - 1600px)
   ============================================= */
@media (min-width: 1280px) and (max-width: 1599px) {
  .page-content {
    padding: 36px 60px 90px;
  }
  .field-row { grid-template-columns: 1fr 1fr !important; }
  .field-row-3 { grid-template-columns: 1fr 1fr 1fr !important; }
  .summary-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =============================================
   DESKTOP STANDARD (900px - 1280px)
   ============================================= */
@media (min-width: 900px) and (max-width: 1279px) {
  .page-content {
    padding: 28px 40px 80px;
  }
  .field-row { grid-template-columns: 1fr 1fr !important; }
  .field-row-3 { grid-template-columns: 1fr 1fr 1fr !important; }
  .summary-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =============================================
   TABLETTE (600px - 900px)
   ============================================= */
@media (min-width: 600px) and (max-width: 899px) {
  .page-content {
    padding: 20px 24px 70px;
  }
  .panel {
    padding: 16px;
    border-radius: 12px;
  }
  .field-row { grid-template-columns: 1fr 1fr !important; }
  .field-row-3 { grid-template-columns: 1fr 1fr !important; }
  .summary-grid { grid-template-columns: 1fr 1fr !important; }
  .page-title { font-size: 18px !important; }

  /* Nav tablette */
  .nav-mid { gap: 12px !important; }
  .nav-mid a { font-size: 13px !important; }

  /* Footer tablette */
  .xb-footer-cols { gap: 24px !important; }
  .xb-footer-brand { max-width: 200px !important; }
}

/* =============================================
   PETITS PHONES (480px - 599px)
   ============================================= */
@media (min-width: 480px) and (max-width: 599px) {
  .page-content {
    padding: 14px 16px 70px;
  }
  .panel {
    padding: 14px;
    border-radius: 11px;
    margin-bottom: 12px;
  }
  .field-row { grid-template-columns: 1fr 1fr !important; }
  .field-row-3 { grid-template-columns: 1fr 1fr !important; }
  .summary-grid { grid-template-columns: 1fr 1fr !important; }
  .page-title { font-size: 17px !important; }

  /* Inputs touch-friendly */
  input[type="text"], input[type="email"], input[type="date"],
  input[type="number"], input[type="tel"], select, textarea {
    min-height: 42px;
    font-size: 16px !important; /* prevent iOS auto-zoom */
  }
  .btn { min-height: 42px; }
  button { min-height: 42px; }
}

/* =============================================
   MOBILE (< 480px)
   ============================================= */
@media (max-width: 479px) {
  .page-content {
    padding: 10px 10px 60px;
  }
  .panel {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  /* Tout en colonne unique */
  .field-row,
  .field-row-3,
  .summary-grid { grid-template-columns: 1fr !important; }

  .page-title { font-size: 16px !important; }
  .page-subtitle { font-size: 11px !important; }
  .panel-title { font-size: 10px !important; }

  /* Touch targets min 44px (Apple HIG) */
  input[type="text"], input[type="email"], input[type="date"],
  input[type="number"], input[type="tel"], select, textarea {
    min-height: 44px;
    font-size: 16px !important; /* prevent iOS auto-zoom */
    padding: 10px 12px;
  }
  .btn { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  button { min-height: 44px; }

  /* Boutons pleine largeur sur mobile */
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; justify-content: center; }

  /* Nav mobile */
  .nav-mid { display: none !important; }
  .nav-inner { gap: 8px !important; }

  /* Footer mobile - colonne unique */
  .xb-footer-inner { flex-direction: column !important; gap: 24px !important; }
  .xb-footer-brand { max-width: 100% !important; }
  .xb-footer-cols { flex-direction: column !important; gap: 16px !important; }

  /* Preview frames */
  iframe { height: 260px !important; }
}

/* =============================================
   PWA / MODE STANDALONE
   ============================================= */
@media (display-mode: standalone) {
  .nav-inner {
    padding-top: env(safe-area-inset-top);
  }
  .page-content {
    padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
  }
}

/* =============================================
   ORIENTATION PAYSAGE (phones en landscape)
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
  nav {
    position: relative !important;
  }
  .page-content {
    padding-top: 8px;
  }
}

/* =============================================
   ACCESSIBILITE - prefers-reduced-motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}