/* ══════════════════════════════════════════════════════════════════════
   MAKTOUB MAGHREB — RÈGLES RESPONSIVES COMMUNES      css/mk-responsive.css
   Points de rupture : 360 (petit mobile) · 600 (mobile) · 768 (tablette)
   · 1024 (portable) · 1440 (grand écran). Règles volontairement prudentes
   et globales ; les corrections propres à une page vont dans la page.
   ══════════════════════════════════════════════════════════════════════ */

/* Jamais de défilement horizontal de la page (clip, pas hidden : préserve position:sticky) */
html,body{overflow-x:clip}
img,video,iframe{max-width:100%}

/* Écrans tactiles : champs à 16 px (sinon iOS zoome au focus) et cibles confortables */
@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea{font-size:max(16px,1em)}
  .mk-btn,.mk-input,.mk-select,.form-control,.filter-control,.btn-filter,.btn-submit,.modal-close{min-height:var(--mk-tap)}
  .mk-btn--sm{min-height:40px}
}

/* Tablette et moins */
@media (max-width:768px){
  :root{--mk-gutter:1rem}
  .mk-page{padding-block:var(--mk-s6) var(--mk-s10)}
  .mk-panel{padding:var(--mk-s4)}
  /* Tableaux : défilement horizontal dans leur propre boîte au lieu d'élargir la page */
  table:not(.mk-tbl-static){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mk-tbl-wrap table{display:table}
}

/* Mobile */
@media (max-width:600px){
  :root{--mk-fs-3xl:clamp(1.7rem,7vw,2.1rem);--mk-fs-2xl:clamp(1.45rem,6vw,1.75rem)}
  .mk-row--stack-sm{flex-direction:column;align-items:stretch}
  .mk-row--stack-sm>.mk-btn{width:100%}
  /* Modales en volet bas, plein largeur, faciles à atteindre au pouce */
  .mk-modal{align-items:flex-end;padding:0}
  .mk-modal__dialog{max-width:none;border-radius:var(--mk-r-lg) var(--mk-r-lg) 0 0;max-height:92dvh;padding:var(--mk-s5) var(--mk-s4) calc(var(--mk-s5) + env(safe-area-inset-bottom))}
  .mk-modal__foot{flex-direction:column-reverse}
  .mk-modal__foot .mk-btn{width:100%}
  .modal{max-height:calc(100dvh - 1.5rem)}
  .mk-footer__in{padding-top:var(--mk-s8)}
}

/* Petit mobile */
@media (max-width:360px){
  :root{--mk-gutter:.75rem}
  .mk-btn{padding-inline:.9rem}
  .mk-tabset [role="tab"],.mk-tabset__tab{padding-inline:.7rem}
}

/* Grand écran : conteneurs un peu plus larges, lecture confortable */
@media (min-width:1440px){
  :root{--mk-w:1200px;--mk-w-wide:1360px}
}

/* Impression : contenu seul */
@media print{
  #main-nav,#nav-links,.mk-tabbar,.mk-footer,.toast,#mk-backdrop{display:none!important}
  body{background:#fff;color:#000;padding:0!important}
}