/* ===================================================================
   app.css — Amelyorasyon responsiv global pou sistèm CMHC
   -------------------------------------------------------------------
   Règ sa yo ADISYONÈL: yo amelyore aparans sou telefòn/tablèt san yo
   pa chanje dizay desktop la (pifò règ yo nan @media max-width).
   Chaje APRE CSS chak paj la, konsa li ka korije pwoblèm responsiv.
   =================================================================== */

/* --- Règ inivèsèl san danje --- */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* Anpeche paj la depase lajè ekran an (horizontal scroll) */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Telefòn ak tablèt (≤ 1024px) --- */
@media screen and (max-width: 1024px) {
  /* Tablo laj yo vin glise orizontalman olye yo kase paj la */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Telefòn (≤ 768px) --- */
@media screen and (max-width: 768px) {
  /* Diminye padding twò gwo sou konntenè komen yo */
  .container, .content, .main-content, .card, .box, .wrapper {
    max-width: 100% !important;
  }

  /* Tit twò gwo sou ti ekran */
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }

  /* Bouton ak chan fòm pi fasil pou peze ak dwèt */
  button, .btn, input[type="submit"], input, select, textarea {
    font-size: 16px;          /* anpeche zoom otomatik sou iOS */
    max-width: 100%;
  }

  /* Griy ki kanpe sou kolòn vin youn anba lòt */
  .grid, .row, .flex-row, .stats, .cards {
    flex-direction: column !important;
  }
}

/* --- Ti telefòn (≤ 480px) --- */
@media screen and (max-width: 480px) {
  body { font-size: 15px; }
  .hide-mobile { display: none !important; }
}

/* --- Enprime: pa aplike règ responsiv sou bilten/resi --- */
@media print {
  html, body { overflow: visible; }
  table { display: table; overflow: visible; }
}