/* ============================================================
   responsive.css — JEDECROU
   Couvre tous les écrans : 320px → 2560px+
   Breakpoints :
     xxs : ≤ 360px   (Techno Pop, téléphones budget Android)
     xs  : ≤ 480px   (petits téléphones)
     sm  : ≤ 575px   (téléphones standard)
     md  : ≤ 767px   (grands téléphones)
     lg  : ≤ 991px   (tablette portrait)
     xl  : ≤ 1199px  (petit bureau)
     xxl : 1200px+   (bureau / grand écran / 4K)
============================================================ */

/* ── BASE UNIVERSELLE ── */
html, body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box !important; }
img, video, iframe, embed { max-width: 100% !important; height: auto; display: block; }
table { width: 100%; word-break: break-word; }
input, select, textarea, button { max-width: 100%; }

/* ── Flexbox avec prefixes webkit (Android ancien) ── */
.d-flex, .flex-row, .flex-column {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}

/* ── iOS : empêche le zoom auto au focus sur les inputs ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-size: 16px !important;
  -webkit-appearance: none;
}

/* ── Tableaux : scroll horizontal sur mobile ── */
.table-responsive,
.table-wrap,
.table-container {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  display: block;
  width: 100%;
}

/* ── Modales ── */
@media (max-width: 767px) {
  .modal-dialog        { margin: 8px !important; max-width: calc(100% - 16px) !important; }
  .modal-content       { border-radius: 12px !important; }
  .modal-body          { padding: .75rem !important; }
  .modal-header        { padding: .6rem .75rem !important; }
  .modal-footer        { padding: .5rem .75rem !important; flex-wrap: wrap !important; gap: 6px; }
  .modal-footer .btn   { flex: 1 1 auto; min-width: 120px; }
}
@media (max-width: 480px) {
  .modal-footer .btn { width: 100% !important; }
}

/* ============================================================
   ≤ 991px — Tablette portrait + tous mobiles
============================================================ */
@media (max-width: 991px) {
  .search-header .input-group { max-width: 100% !important; }
  .prix-container              { max-width: 100% !important; }
  .amenities-grid-small        { height: auto !important; }
  .cover-header                { min-height: 280px !important; }
  .main-content                { margin-left: 0 !important; }
  .stat-card                   { min-height: unset !important; }
  .container-custom            { padding: 12px !important; }
}

/* ============================================================
   ≤ 767px — Grands téléphones (Samsung Galaxy, iPhone 14…)
============================================================ */
@media (max-width: 767px) {
  h1, .h1 { font-size: 1.4rem !important; }
  h2, .h2 { font-size: 1.2rem !important; }
  h3, .h3 { font-size: 1.05rem !important; }
  h4, .h4 { font-size: 1rem !important; }
  h5, .h5 { font-size: .9rem !important; }
  h6, .h6 { font-size: .85rem !important; }

  .container, .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .row { margin-left: -6px !important; margin-right: -6px !important; }
  .row > * { padding-left: 6px !important; padding-right: 6px !important; }

  .btn    { font-size: .82rem !important; }
  .btn-lg { font-size: .9rem !important; padding: .5rem 1rem !important; }
  .btn-sm { font-size: .75rem !important; padding: .25rem .5rem !important; }

  .card-body   { padding: .75rem !important; }
  .card-header { padding: .6rem .9rem !important; }
  .card-footer { padding: .5rem .9rem !important; }

  .alert  { font-size: .82rem !important; padding: .5rem .75rem !important; }
  .badge  { font-size: .68rem !important; }

  table td, table th { font-size: .78rem !important; padding: .3rem .4rem !important; white-space: nowrap; }

  /* index.php */
  .etablissement-image,
  .image-container,
  .image-placeholder  { height: 165px !important; }
  .card-title         { font-size: .95rem !important; }
  .card-text          { font-size: .82rem !important; }
  .etablissement-card { margin-bottom: 12px !important; }

  /* profil.php */
  .cover-header       { min-height: 210px !important; }
  .galerie-list       { height: 220px !important; }
  .galerie-item       { min-width: 140px !important; height: 140px !important; }
  .info-section,
  .reservation-section { padding: 12px !important; }
  .nav-tabs .nav-link { font-size: .8rem; padding: .4rem .6rem; }
  .option-card        { padding: .6rem !important; }

  /* dashboard */
  .page-title         { font-size: 1.1rem !important; }
  .stat-number        { font-size: 1.4rem !important; }
  .main-content       { padding: 8px !important; }
  .form-control,
  .form-select        { font-size: .875rem !important; }
  .dashboard-card .card-body { padding: 12px !important; }

  /* formulaires */
  .services-grid      { grid-template-columns: 1fr 1fr !important; }
  .col-md-6           { width: 100% !important; }
  .btn-next, .btn-submit, .btn-prev { width: 100%; margin-top: 6px; }
  .galerie-item       { height: 90px !important; }
}

/* ============================================================
   ≤ 575px — Téléphones standard
============================================================ */
@media (max-width: 575px) {
  .col-sm-6, .col-md-4,
  .col-md-3, .col-lg-4,
  .col-lg-3              { width: 100% !important; }
  .col-4                 { width: 50% !important; }

  /* index.php */
  .hero-title    { font-size: 1.2rem !important; }
  .hero-subtitle { font-size: .85rem !important; }
  .filter-btn    { font-size: .75rem !important; padding: .3rem .5rem !important; }
  .filter-bar    { -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important; gap: 6px !important; }
  .map-container { height: 250px !important; }

  /* profil.php */
  .cover-header   { min-height: 165px !important; }
  .etab-logo      { width: 60px !important; height: 60px !important; }
  .sejour-details { height: auto !important; }
  .sticky-cta     { padding: 8px !important; }

  /* formulaires */
  .step-connector   { display: none !important; }
  .services-grid    { grid-template-columns: 1fr !important; }
  .form-check-label { font-size: .82rem !important; }
  textarea          { min-height: 80px !important; }
  .image-preview    { max-width: 100% !important; }

  /* dashboard */
  .d-flex.gap-3    { gap: .5rem !important; }
  .d-flex.gap-2    { -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important; }
  .btn-group       { -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; }
  .galerie-grid img{ width: 80px !important; height: 60px !important; }

  /* nav-tabs scrollable */
  .nav-tabs {
    -webkit-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; font-size: .77rem; padding: .35rem .5rem; }

  .action-btns          { -webkit-flex-direction: column !important; flex-direction: column !important; }
  .action-btns .btn     { width: 100%; margin: 3px 0 !important; }
  .login-card           { padding: 1rem !important; }
}

/* ============================================================
   ≤ 480px — Petits téléphones (480×854)
============================================================ */
@media (max-width: 480px) {
  body    { font-size: .85rem !important; }
  h1,.h1  { font-size: 1.25rem !important; }
  h2,.h2  { font-size: 1.1rem !important; }
  h3,.h3  { font-size: .95rem !important; }

  .col-4  { width: 100% !important; }
  [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }

  .etablissement-image,
  .image-container,
  .image-placeholder { height: 145px !important; }
  .card-body         { padding: .6rem !important; }
  .cover-header      { min-height: 145px !important; }
  .galerie-item      { min-width: 115px !important; height: 115px !important; }

  /* Boutons flottants */
  #chat-fab, #gchat-fab,
  .scroll-btn, .scroll-button,
  .btn-whatsapp {
    width: 44px !important; height: 44px !important;
    font-size: .9rem !important;
  }
  #chat-fab  { bottom: 135px !important; right: 12px !important; }
  #gchat-fab { bottom: 135px !important; right: 12px !important; }

  /* Panels chat : plein écran */
  #chat-panel, #gchat-panel {
    right: 0 !important; left: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; max-height: 82vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
  }

  .step-circle    { width: 32px !important; height: 32px !important; font-size: .78rem !important; }
  .step-label     { font-size: .63rem !important; }
  .container-custom { padding: 8px !important; }
  table td, table th { font-size: .73rem !important; padding: .25rem .3rem !important; }
  .stat-number    { font-size: 1.2rem !important; }
  .stat-icon      { width: 34px !important; height: 34px !important; }
  .page-title     { font-size: .95rem !important; }
}

/* ============================================================
   ≤ 360px — Techno Pop, budget Android (360×640–800px CSS)
============================================================ */
@media (max-width: 360px) {
  body { font-size: .8rem !important; line-height: 1.4 !important; }

  h1,.h1 { font-size: 1.15rem !important; }
  h2,.h2 { font-size: 1rem !important; }
  h3,.h3 { font-size: .9rem !important; }
  h4,.h4,.h5,.h5,.h6,.h6 { font-size: .82rem !important; }

  .container, .container-fluid {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .row { margin-left: -4px !important; margin-right: -4px !important; }
  .row > * { padding-left: 4px !important; padding-right: 4px !important; }

  /* Tout sur 1 colonne */
  [class*="col-"] { width: 100% !important; float: none !important; }

  .btn  { font-size: .75rem !important; padding: .3rem .55rem !important; width: 100% !important; margin-bottom: 4px; }
  .btn + .btn { margin-left: 0 !important; }
  .d-flex.gap-2, .d-flex.gap-3 {
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Cartes */
  .card         { border-radius: 8px !important; margin-bottom: 8px !important; }
  .card-body    { padding: .5rem !important; }
  .card-header  { padding: .4rem .6rem !important; font-size: .8rem !important; }

  .badge  { font-size: .6rem !important; padding: .2em .4em !important; }
  .alert  { font-size: .78rem !important; padding: .4rem .6rem !important; }

  /* Tables */
  table td, table th { font-size: .68rem !important; padding: .2rem .25rem !important; }

  /* Images */
  .etablissement-image,
  .image-container,
  .image-placeholder { height: 120px !important; }
  .cover-header      { min-height: 120px !important; }
  .galerie-item      { min-width: 90px !important; height: 90px !important; }

  /* Nav-tabs */
  .nav-tabs .nav-link { font-size: .7rem !important; padding: .28rem .38rem !important; }

  /* Formulaires */
  .step-circle   { width: 28px !important; height: 28px !important; font-size: .7rem !important; }
  .step-label    { font-size: .58rem !important; }
  .form-label    { font-size: .78rem !important; margin-bottom: .2rem !important; }
  .form-control,
  .form-select   { padding: .3rem .5rem !important; font-size: 16px !important; }
  .input-group-text { font-size: .78rem !important; padding: .3rem .5rem !important; }

  /* Dashboard stats */
  .stat-number   { font-size: 1.1rem !important; }
  .stat-icon     { width: 30px !important; height: 30px !important; font-size: .85rem !important; }
  .page-title    { font-size: .88rem !important; }

  /* Chat */
  #chat-fab, #gchat-fab {
    width: 40px !important; height: 40px !important;
    font-size: .82rem !important;
    bottom: 130px !important; right: 8px !important;
  }
  #chat-panel, #gchat-panel {
    max-height: 88vh !important;
  }

  /* Modal */
  .modal-dialog { margin: 3px !important; }
  .modal-body   { padding: .5rem !important; }
  .modal-title  { font-size: .88rem !important; }
}

/* ============================================================
   ≤ 320px — Très vieux appareils / mini phones
============================================================ */
@media (max-width: 320px) {
  body { font-size: .75rem !important; }
  .btn { font-size: .7rem !important; padding: .25rem .45rem !important; }
  h1,.h1 { font-size: 1rem !important; }
  .cover-header { min-height: 100px !important; }
  .etablissement-image,
  .image-container { height: 100px !important; }
  table td, table th { font-size: .62rem !important; }
  .step-label { display: none !important; }
}

/* ============================================================
   GRANDS ÉCRANS : ≥ 1400px
============================================================ */
@media (min-width: 1400px) {
  .container { max-width: 1320px !important; }
  .etablissement-image,
  .image-container { height: 240px !important; }
  .cover-header    { min-height: 500px !important; }
}

@media (min-width: 1920px) {
  .container { max-width: 1600px !important; }
  body { font-size: 1.05rem !important; }
  h1,.h1 { font-size: 2.5rem !important; }
  h2,.h2 { font-size: 2rem !important; }
  .etablissement-image,
  .image-container { height: 280px !important; }
  .cover-header    { min-height: 600px !important; }
  .btn { font-size: 1rem !important; }
  .nav-tabs .nav-link { font-size: 1rem; }
}

@media (min-width: 2560px) {
  .container { max-width: 2000px !important; }
  body { font-size: 1.15rem !important; }
  h1,.h1 { font-size: 3rem !important; }
  .etablissement-image,
  .image-container { height: 360px !important; }
  .cover-header    { min-height: 700px !important; }
  .card-body       { padding: 2rem !important; }
  .btn             { font-size: 1.1rem !important; padding: .6rem 1.4rem !important; }
}