/* ═══════════════════════════════════════════════════════════════════
   KING PHARMA & COLIS — KIT RESPONSIVE GLOBAL (toutes pages)
   ───────────────────────────────────────────────────────────────────
   Chargé en DERNIER après les autres feuilles → ajoute des
   fondations universelles et comble les trous (tablette, mobile,
   tap targets, typo fluide, anti-overflow) sans écraser le design.

   Breakpoints normalisés :
     -  ≤ 380 px    micro-mobile (iPhone SE / Galaxy Fold)
     -  381–640 px  mobile portrait
     -  641–768 px  mobile paysage / petite tablette
     -  769–1024 px tablette / sidebar off-canvas
     -  1025–1280   laptop
     -  1281–1599   desktop
     -  ≥ 1600 px   desktop XL
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Fondations universelles ───────────────────────────── */

/* Anti-overflow horizontal (la première cause de rendu cassé sur mobile) */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
/* Box-sizing partout (filet de sécurité au cas où) */
*, *::before, *::after { box-sizing: border-box; }

/* Médias toujours fluides */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}
/* Sauf icônes inline (Material Symbols) qui doivent garder leur taille */
.material-symbols-outlined,
.kp-ico, .kp-ico-sm,
.db-nav-item svg, .db-stat-icon svg, .db-notif-btn svg,
.db-bottom-nav-item svg, .db-menu-toggle svg {
  max-width: none;
  height: auto;
}

/* Anti-débordement texte (longs liens, mots compactés…) */
h1, h2, h3, h4, h5, h6, p, li, a, span, td, th, label, button {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Coupures fines pour URLs/identifiants longs */
code, pre, .kp-break {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Inputs lisibles sur iOS : ≥ 16px évite le zoom auto au focus */
input, select, textarea {
  font-size: 16px;
}
@media (min-width: 1025px) {
  /* Sur desktop on peut redescendre */
  input, select, textarea { font-size: 14px; }
}

/* Tap target minimum 44×44 (Apple HIG / WCAG 2.5.5) sur tactile */
@media (hover: none) and (pointer: coarse) {
  button, .btn, [role="button"],
  a.db-nav-item, a.db-bottom-nav-item,
  .cp-filter, .cp-notif-card,
  input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  /* Espacer un peu les zones cliquables côte-à-côte */
  .db-nav-item + .db-nav-item,
  .cp-filter + .cp-filter { margin-top: 2px; }
}

/* Scrollbars discrètes sur les conteneurs qui scrollent */
.cp-filters, .db-admin-table-wrapper,
.cp-tracking-steps, [data-hscroll] {
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,.25) transparent;
}
.cp-filters::-webkit-scrollbar,
.db-admin-table-wrapper::-webkit-scrollbar,
.cp-tracking-steps::-webkit-scrollbar,
[data-hscroll]::-webkit-scrollbar { height: 6px; width: 6px; }
.cp-filters::-webkit-scrollbar-thumb,
.db-admin-table-wrapper::-webkit-scrollbar-thumb,
.cp-tracking-steps::-webkit-scrollbar-thumb,
[data-hscroll]::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.25); border-radius: 999px;
}

/* Désactiver le tap-highlight bleu disgracieux sur mobile */
a, button, [role="button"], .cp-notif-card, .db-nav-item {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ── 2. Typographie fluide ────────────────────────────────── */

/* H1/H2 vitrine et dashboards : taille qui s'adapte de 320 → 1440 px */
h1, .h1, .hero h1, .db-hero-text h1,
.home-hero-text h1, .login-title, .reg-title, .pt-section-title h1 {
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem);
  line-height: 1.15;
}
/* Le hero d'accueil utilise un sélecteur ultra-spécifique en style.css,
   on l'aide à respecter le viewport mobile */
@media (max-width: 640px) {
  .home-hero-text h1 { font-size: clamp(1.4rem, 5vw + .5rem, 2rem) !important; }
  .home-hero-text p.hero-desc { font-size: 15px !important; max-width: 100% !important; }
  .hero, .home-hero { padding-left: 16px; padding-right: 16px; }
  /* Garde-fou : tout enfant direct du body ne peut pas être plus large que l'écran */
  body > * { max-width: 100vw; }
}
h2, .h2, .section-title, .db-section-title {
  font-size: clamp(1.25rem, 1.2vw + .9rem, 1.8rem);
  line-height: 1.2;
}
h3, .h3 {
  font-size: clamp(1.05rem, .6vw + .9rem, 1.35rem);
  line-height: 1.3;
}
p, li { line-height: 1.6; }
/* Garde-fou : titres très longs ne débordent jamais */
h1, h2, h3 { max-width: 100%; }

/* ── 3. Conteneurs fluides ────────────────────────────────── */

/* Utilitaire : conteneur centré qui respire selon la taille de l'écran.
   À ajouter manuellement où on en a besoin (sans casser les .container existants). */
.kp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}
.kp-container--narrow { max-width: 760px; }
.kp-container--wide   { max-width: 1440px; }

/* ── 4. Tableaux : wrapper qui scrolle horizontalement ──── */
.kp-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.kp-table-wrap table { min-width: 600px; }

/* Les tables existantes (vitrine / pages légales) deviennent
   automatiquement scrollables si le parent n'en a pas. */
@media (max-width: 768px) {
  table:not([class]) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ── 5. Pages auth (connexion, inscription, vérifier, légal) ── */
@media (max-width: 480px) {
  /* Les cartes / formulaires prennent toute la largeur, avec padding raisonnable */
  .auth-card, .form-card, main {
    border-radius: 12px;
  }
  /* Conteneurs principaux sans débordement */
  main, .auth-wrap, .form-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── 6. Dashboards : tablette portrait (intervalle ignoré) ─ */

/* L'existant gère ≤ 1024 (sidebar off-canvas) et ≤ 640 (mobile).
   On comble la zone 641–768 (tablette portrait / grand téléphone paysage) */
@media (max-width: 768px) and (min-width: 641px) {
  .db-content { padding: 20px 18px 96px; }
  .db-stats   { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .db-services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .db-section-title { font-size: 18px; }
}

/* Mobile très étroit : tout en colonne unique, padding réduit */
@media (max-width: 380px) {
  .db-content { padding: 14px 12px 96px; }
  .db-stats   { grid-template-columns: 1fr; }
  .db-services-grid { grid-template-columns: 1fr; }
  .db-hero-text h1 { font-size: 20px; }
  .db-topbar { padding: 0 12px; }
  .db-notif-btn { width: 38px; height: 38px; }
  .db-topbar-avatar { width: 34px; height: 34px; font-size: 14px; }
  /* Boutons un peu compacts */
  .db-btn-primary, .db-btn-secondary { padding: 10px 14px; font-size: 13px; }
}

/* ── 7. Modals : fullscreen sur mobile ────────────────────── */
@media (max-width: 640px) {
  .ad-modal-card,
  .modal-card, .kp-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
    /* S'aligne en bas (style bottom sheet, plus naturel au pouce) */
    align-self: flex-end;
  }
  .ad-modal { align-items: flex-end; }
}

/* ── 8. Touch / hover : pas de hover sur tactile ──────────── */
@media (hover: none) {
  /* Désactive les effets de translation au hover (qui restaient « collés » sur mobile) */
  .db-service-tile:hover,
  .cp-stat-card:hover,
  .cp-support-card:hover,
  .cp-notif-card:hover {
    transform: none;
  }
}

/* ── 9. Préférences utilisateur ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
}

/* Dark mode système : préparation a minima (pour pages publiques).
   Les dashboards ont leur propre thème, on n'y touche pas. */
@media (prefers-color-scheme: dark) {
  /* Préparation future — laissé volontairement vide pour ne rien casser */
}

/* ── 10. Impression (factures, devis) ────────────────────── */
@media print {
  .db-sidebar, .db-topbar, .db-bottom-nav,
  .db-menu-toggle, .db-notif-btn,
  #kp-toast-container, #kp-consent, #kp-loading-overlay {
    display: none !important;
  }
  body { background: #fff; }
  .db-main { margin-left: 0 !important; }
  .db-content { padding: 0 !important; }
}

/* ── 11. Garde-fous spécifiques (problèmes courants) ──────── */

/* Hero/bandeaux : pas de hauteur fixe qui clippe sur mobile haut */
@media (max-width: 640px) {
  [class*="hero"][style*="height"] { height: auto !important; min-height: 0 !important; }
}

/* Boutons et inputs full-width quand seuls dans une cellule */
@media (max-width: 480px) {
  .form-actions .btn,
  .form-actions button {
    width: 100%;
  }
  .form-row { flex-direction: column; }
  .form-row > * { width: 100%; }
}

/* Images de carte (Leaflet) — hauteur fluide qui respecte mobile */
@media (max-width: 768px) {
  .leaflet-container,
  [id$="-map"], .kp-map, .cp-suivi-map .leaflet-container {
    min-height: 260px;
    max-height: 50vh;
  }
}

/* ── 12. Renfort responsive — formulaires & modales des dashboards ──
   Les grilles 2 colonnes en STYLE INLINE (formulaires/détails rendus en JS,
   espaces admin & partenaire surtout) n'étaient pas captées par les media
   queries basées sur les classes. On les passe en 1 colonne sur mobile. */
@media (max-width: 600px) {
  .db-content [style*="grid-template-columns:1fr 1fr"],
  .db-content [style*="grid-template-columns: 1fr 1fr"],
  .db-content [style*="grid-template-columns:repeat(2"],
  .db-content [style*="grid-template-columns: repeat(2"],
  .db-modal   [style*="grid-template-columns:1fr 1fr"],
  .db-modal   [style*="grid-template-columns: 1fr 1fr"],
  .ad-modal   [style*="grid-template-columns:1fr 1fr"],
  #adminModalHost [style*="grid-template-columns:1fr 1fr"],
  #adminModalHost [style*="grid-template-columns: 1fr 1fr"],
  .sup-wrap {
    grid-template-columns: 1fr !important;
  }

  /* Modales : padding et largeur adaptés au petit écran */
  .db-modal { padding: 18px !important; border-radius: 16px !important; }
  .db-modal-overlay { padding: 10px !important; align-items: flex-start !important; }
  .db-modal-overlay .db-modal { margin-top: 10px; max-height: 94vh; }

  /* Titres de section avec actions à droite : empilement propre */
  .db-section-title[style*="space-between"] { flex-wrap: wrap; gap: 10px; }

  /* Barres d'outils (filtres + bascule + recherche) : pleine largeur */
  .ad-toolbar .cp-filters { width: 100%; overflow-x: auto; }
  #adminOrdersViewToggle, #adminPartnersViewToggle { width: 100%; justify-content: center; }
}

/* Tablette : la carte de supervision passe la liste sous la carte */
@media (max-width: 1024px) {
  .sup-wrap { grid-template-columns: 1fr !important; }
  .sup-wrap #supMap { height: 460px; }
  .sup-side { max-height: 360px; }
}