/* ============================================================
   Delacroix — Responsive global (mobile-first overrides)
   Chargé par toutes les pages après leur CSS inline.
   ============================================================ */

/* Safe area insets pour iPhone (notch, home indicator) */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Empêcher le double-tap zoom sur iOS qui ralentit l'UX */
button, a, .check-btn, .btn {
  touch-action: manipulation;
}

/* ============================================================
   Desktop (>= 769px) : nav sticky permanente, tous liens visibles
   On force flex-wrap pour qu'aucun lien ne disparaisse jamais.
   ============================================================ */
@media (min-width: 769px) {
  nav {
    flex-wrap: wrap !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 58px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    row-gap: 4px;
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
  }
  /* Le spacer pousse les liens à droite tant qu'il y a de la place,
     mais ne bloque pas le wrap si la fenêtre est étroite. */
  nav .nav-spacer {
    flex: 1 1 auto;
    min-width: 0;
  }
  nav > a {
    flex-shrink: 0;
  }
}

/* ============================================================
   Mobile (< 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Nav : on cache la liste de liens, on affiche un bouton hamburger
     (le bouton est injecté par mobile.js) */
  nav {
    padding: 0 16px !important;
    height: 54px !important;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-brand {
    font-size: 16px !important;
    margin-right: 8px !important;
  }
  .nav-logo {
    width: 26px !important;
    height: 26px !important;
  }

  /* La nav devient un drawer plein écran quand ouverte */
  /* On cache tous les liens SAUF le brand qui reste visible */
  nav.mobile-nav > a:not(.nav-brand) {
    display: none;
  }
  nav.mobile-nav.mobile-open {
    position: fixed;
    inset: 0;
    flex-direction: column;
    background: rgba(10, 10, 20, .98);
    backdrop-filter: blur(20px);
    height: 100vh !important;
    padding: 80px 28px 28px !important;
    align-items: stretch;
    overflow-y: auto;
    z-index: 200;
  }
  nav.mobile-nav.mobile-open > a:not(.nav-brand) {
    display: block;
    font-size: 18px !important;
    padding: 18px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
    text-align: left;
  }
  /* Logo affiché en haut du drawer, taille un peu plus grande */
  nav.mobile-nav.mobile-open .nav-brand {
    position: absolute;
    top: 14px;
    left: 16px;
  }
  nav.mobile-nav.mobile-open .nav-spacer {
    display: none;
  }
  nav.mobile-nav.mobile-open .nav-status,
  nav.mobile-nav.mobile-open .nav-user,
  nav.mobile-nav.mobile-open .nav-deconnexion {
    margin-top: 12px;
    text-align: center;
    padding: 12px !important;
  }

  /* Bouton hamburger (injecté par mobile.js) */
  .mobile-menu-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #e8e8ee;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 201;
  }
  .mobile-menu-btn:active {
    background: rgba(255,255,255,.08);
  }
  nav.mobile-nav.mobile-open .mobile-menu-btn {
    position: fixed;
    top: 8px;
    right: 12px;
  }

  /* Contenu principal : padding réduit */
  .contenu {
    padding: 20px 16px !important;
  }

  /* Headers */
  .page-titre, .page-titre {
    font-size: 24px !important;
  }
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* KPIs : grille plus fluide */
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .kpi-carte, .kpi {
    padding: 14px !important;
  }
  .kpi-valeur, .kpi-val {
    font-size: 22px !important;
  }

  /* Cartes (entreprises, factures, etc) */
  .entreprises-grid {
    grid-template-columns: 1fr !important;
  }
  .pipeline {
    grid-template-columns: 1fr !important;
  }
  .deux-cols {
    grid-template-columns: 1fr !important;
  }
  .grille {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  /* Touch targets : tous les boutons font min 44px */
  .btn, .check-btn, button.btn, .raccourci {
    min-height: 44px;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  .btn-small {
    min-height: 38px;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Modals : plein écran sur mobile, scroll interne propre */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    padding: 24px 18px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    animation: slideUp .25s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Champs de formulaires : plus grands sur mobile */
  .champ input, .champ select, .champ textarea {
    font-size: 16px !important; /* évite le zoom auto iOS sur focus */
    padding: 14px 14px !important;
  }
  .modal-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-actions .btn {
    width: 100% !important;
    justify-content: center;
  }

  /* Tableaux : autoriser scroll horizontal propre */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }
  table {
    font-size: 13px !important;
  }
  th, td {
    padding: 8px 10px !important;
  }

  /* Sections titre */
  .section-titre {
    font-size: 14px !important;
    flex-wrap: wrap;
  }

  /* Bloc */
  .bloc {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  /* Bandeau d'alerte décisions sur l'index */
  .bloc-decisions {
    padding: 16px !important;
  }
  .decision-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Photos page : modal photo plein écran */
  .modal-photo {
    max-width: 100vw !important;
    max-height: 55vh !important;
  }

  /* Boîte de réception : zone textarea plus petite */
  .champ-row {
    grid-template-columns: 1fr !important;
  }

  /* Login card */
  .login-card {
    padding: 32px 22px !important;
  }

  /* Item lists (admin) */
  .item {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .item-actions {
    width: 100% !important;
  }
  .item-actions .check-btn {
    flex: 1;
    justify-content: center;
  }

  /* Login: input plus grand */
  .login-card input {
    font-size: 16px !important;
    padding: 16px 18px !important;
  }
  .login-card button {
    min-height: 50px;
    font-size: 17px !important;
  }

  /* Cards CR avec photos */
  .cr-carte {
    padding: 18px !important;
  }

  /* Décisions : grille votes en colonne */
  .votes-grille {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .vote-carte {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .vote-utilisateur {
    font-size: 12px !important;
  }

  /* Mémoire : actions stack */
  .actions {
    flex-direction: column;
    width: 100%;
  }
  .actions .btn, .actions a.btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   Très petit écran (< 380px) : iPhone SE / petits Android
   ============================================================ */
@media (max-width: 380px) {
  .page-titre {
    font-size: 20px !important;
  }
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .grille {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   PWA installée (standalone) : padding pour la status bar
   ============================================================ */
@media (display-mode: standalone) {
  nav {
    padding-top: env(safe-area-inset-top, 8px) !important;
    height: calc(54px + env(safe-area-inset-top, 0px)) !important;
  }
}