/* ============================================================================
   NS DIGITAL SERVICES — Adaptations responsives
   ----------------------------------------------------------------------------
   Le socle de main.css est déjà fluide : grilles auto-adaptatives, clamp() sur
   la typographie et les espacements. Ce fichier ne traite donc que les points
   où une simple fluidité ne suffit pas — principalement la navigation, les
   panneaux latéraux et les très grands écrans.

   Points de rupture retenus :
     ≤  480 px  petits smartphones Android / iPhone SE
     ≤  767 px  smartphones
     ≤ 1024 px  tablettes et iPad
     ≥ 1600 px  écrans 2K
     ≥ 2200 px  écrans 4K
   ========================================================================== */

/* ── Tablettes et iPad ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Les panneaux latéraux (espace client, administration) se replient en
     bandeau d'icônes : les libellés disparaissent, les icônes restent. */
  .ns-sidebar { width: 72px; }
  .ns-sidebar__label { display: none; }

  /* Les mises en page à deux colonnes repassent sur une colonne. */
  .ns-split { grid-template-columns: 1fr; }
}

/* ── Smartphones ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Navigation : le menu horizontal cède la place au bouton hamburger,
     ouvert par js/navigation.js qui pose l'attribut data-open sur .ns-nav. */
  .ns-nav {
    display: none;
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--ns-paper);
    border-bottom: 1px solid var(--ns-line);
    box-shadow: var(--ns-shadow-md);
    padding: var(--ns-space-3) var(--ns-gutter) var(--ns-space-5);
  }
  .ns-nav[data-open="true"] { display: flex; }
  .ns-nav a { padding: 14px 0; border-bottom: 1px solid var(--ns-line-soft); font-size: 16px; }
  .ns-burger { display: inline-flex; align-items: center; justify-content: center; }
  .ns-header__inner { position: relative; justify-content: space-between; }
  .ns-header__actions { display: none; }   /* les CTA repassent dans le menu  */

  /* Les boutons occupent toute la largeur : cible tactile maximale. */
  .ns-btn { width: 100%; }
  .ns-cluster .ns-btn { width: auto; }

  /* Le bouton WhatsApp flottant se rapproche du pouce. */
  .ns-whatsapp-fab { right: 16px; bottom: 16px; }

  /* Les tableaux gardent leur lisibilité grâce au défilement horizontal
     hérité de .ns-table-wrap : ne jamais forcer un table-layout fixe ici. */
  .ns-table th, .ns-table td { padding-inline: var(--ns-space-4); }

  /* Le pied de page passe sur deux colonnes compactes. */
  .ns-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--ns-space-5); }
  .ns-footer__legal { flex-direction: column; gap: var(--ns-space-2); }
}

/* ── Petits smartphones ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --ns-gutter: 16px; }
  .ns-card__body { padding: var(--ns-space-4); }
  .ns-footer__cols { grid-template-columns: 1fr; }
}

/* ── Écrans 2K ───────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --ns-container: 1400px; }
}

/* ── Écrans 4K ───────────────────────────────────────────────────────────── */
@media (min-width: 2200px) {
  :root {
    --ns-container: 1680px;
    --ns-text-base: 16px;   /* évite un texte minuscule sur une dalle 4K */
  }
}

/* ── Impression ──────────────────────────────────────────────────────────── */
@media print {
  .ns-header, .ns-footer, .ns-whatsapp-fab, .ns-btn { display: none !important; }
  body { background: #FFFFFF; }
  .ns-card { box-shadow: none; border-color: #CCCCCC; }
}