/* ============================================================
   08-responsive.css : Adaptation mobile
   ============================================================
   Trois paliers :
     lg ≤ 900 px : tablette portrait : sidebar rail 64 px, KPI 2 cols
     sm ≤ 600 px : téléphone      :sidebar masquée, tab bar en bas,
                                    en-tête compact 2 lignes, tables en
                                    cartes empilées, touch ≥ 44 px
     xs ≤ 380 px : petit téléphone : KPI 1 col, typo réduite,
                                    filigrane drapeau seul
   ============================================================ */


/* ============================================================
   Tab bar et drawer « Plus » : masqués au-delà de 600 px.
   Réaffichés par les règles de la section SM ci-dessous.
   ============================================================ */
.tabbar,
.plus-drawer { display: none; }


/* ============================================================
   LG : Tablette (≤ 900 px) : règle d'origine préservée
   ============================================================ */
@media (max-width: 900px) {
  .grilleKpi { grid-template-columns: repeat(2, 1fr); }
  .rangee { grid-template-columns: 1fr; }
  .menu { width: 64px; }
  .menu .item span,
  .menu .sep { display: none; }
  .contenu { padding: 14px; }
}


/* ============================================================
   SM : Téléphone (≤ 600 px) : Tab bar, header compact, cartes
   ============================================================ */
@media (max-width: 600px) {

  /* ===== Garde-fou global : empêche le défilement horizontal de la page ===== */
  html, body { overflow-x: hidden; }

  /* ===== Fix d'écrasement flex : empêche .contenu (item flex) de grandir
     pour absorber la largeur du tableau, ce qui annulerait overflow-x: auto.
     Sans min-width: 0, le tableau « aspire » la largeur du parent. ===== */
  .corps { min-width: 0; }
  .contenu { min-width: 0; max-width: 100%; }

  /* ===== Tab bar ===== */
  .corps > .menu { display: none; }   /* sidebar native masquée : remplacée par le tab bar */

  .tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    height: 56px;
    background: var(--panneau);
    border-top: 1px solid var(--ligne);
    z-index: 90;
    justify-content: space-around;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar + .plus-drawer { display: block; }   /* le drawer reste dans le flux mais invisible tant qu'il n'est pas ouvert */

  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    color: var(--texte3);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    min-height: 44px;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .tab .ico { font-size: 18px; color: var(--vert-clair); line-height: 1; }
  .tab.actif { color: var(--jaune); }
  .tab.actif .ico { color: var(--jaune); }
  .tab:active { background: var(--panneau2); }

  /* ===== Drawer "Plus" (bottom sheet) ===== */
  .plus-drawer { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; }
  .plus-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .plus-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--panneau);
    border-top: 3px solid transparent;
    border-image: var(--degrade-drapeau) 1;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 6px;
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .plus-drawer.ouvert { pointer-events: auto; }
  .plus-drawer.ouvert .plus-backdrop { opacity: 1; }
  .plus-drawer.ouvert .plus-sheet   { transform: translateY(0); }

  .plus-fermer {
    position: absolute; right: 8px; top: 6px;
    width: 44px; height: 44px;
    background: transparent; border: none;
    color: var(--sable); font-size: 28px;
    cursor: pointer; line-height: 1;
  }
  .plus-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 12px;
    font-size: 14px; color: var(--texte);
    text-decoration: none;
    border-bottom: 1px solid var(--ligne);
    min-height: 48px;
  }
  .plus-link .ico { color: var(--vert-clair); font-size: 18px; width: 28px; text-align: center; }
  .plus-link:last-child { border-bottom: 0; }
  .plus-link:active { background: var(--panneau2); }

  /* ===== Réservation de l'espace pour le tab bar ===== */
  body { padding-bottom: 56px; }

  /* ===== En-tête compact (2 lignes) ===== */
  .entete { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .entete .logo { font-size: 16px; letter-spacing: 3px; }
  .entete .drapeauEntete { width: auto; height: 26px; }
  .entete .badgeRole {
    order: 10; flex-basis: 100%;
    font-size: 9.5px;
    padding: 4px 10px;
    margin-top: 4px;
    text-align: center;
  }
  .entete .droite { margin-left: auto; gap: 6px; font-size: 11px; }
  .entete .droite > span:first-child > :not(.pastille) { display: none; }
  .entete .droite > span:nth-child(3) { font-size: 0; }
  .entete .droite > span:nth-child(3) b { font-size: 13px; color: var(--jaune); }

  .btnQuitter { min-height: 44px; padding: 10px 14px; font-size: 11px; }

  /* ===== Titre de page : small empilé sous le titre ===== */
  h2.titrePage { font-size: 15px; letter-spacing: 1.5px; padding-bottom: 8px; margin-bottom: 14px; }
  h2.titrePage small { float: none; display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.4; }

  /* ===== Typographie ===== */
  body { font-size: 13px; line-height: 1.45; }
  .contenu { padding: 14px 14px 24px; }   /* 56 px du tab bar déjà réservé par body */
  .grilleKpi { gap: 10px; margin-bottom: 14px; }
  .kpi { padding: 12px 12px; }
  .kpi .valeur { font-size: 24px; }
  .kpi .libelle { font-size: 10px; line-height: 1.3; }
  .kpi .tendance { font-size: 10.5px; }
  .panneau .tete { padding: 9px 12px; font-size: 10.5px; }
  .panneau .dedans { padding: 10px 12px; }
  th { font-size: 9.5px; padding: 6px 8px; }
  td { padding: 6px 8px; font-size: 11.5px; }
  .ligneBarre .lb { font-size: 10.5px; }
  .etiq { font-size: 10.5px; padding: 4px 10px; }

  /* ===== Touch targets ===== */
  .btn, .btnPhone { min-height: 48px; padding: 14px 16px; font-size: 13px; }
  .filtre, .champ input, .champ select { min-height: 44px; padding: 12px 14px; font-size: 16px; }   /* 16 px évite le zoom iOS au focus */
  input, select, textarea { font-size: 16px; }

  /* ===== Tableaux : wrapper scroll horizontal (filet de sécurité) ===== */
  .panneau {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .panneau > table {
    display: table;
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
  }

  .panneau .entete-cachee { position: absolute; left: -9999px; }   /* reste accessible aux lecteurs d'écran */
  .panneau tr.ligne-carte { display: block; background: var(--panneau); border: 1px solid var(--ligne); padding: 4px 12px; }
  .panneau tr.ligne-carte:first-of-type { border-top: 1px solid var(--ligne); }
  .panneau tr.ligne-carte td {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--ligne);
    font-size: 12px;
  }
  .panneau tr.ligne-carte td:last-child { border-bottom: 0; }
  .panneau tr.ligne-carte td::before {
    content: attr(data-label);
    color: var(--texte3);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    align-self: center;
  }
  /* L'état filtré (tr.style.display='none') reste prioritaire en mode carte */
  .panneau tr.ligne-carte[style*="display: none"] { display: none !important; }

  /* ===== Filigrane : remonté au-dessus du tab bar ===== */
  .filig-wrap { bottom: calc(56px + 6px); right: 8px; font-size: 8px; letter-spacing: 1.5px; }
  .drapeauFilig { width: auto; height: 16px; }

  /* ===== Login ===== */
  .boiteLogin {
    width: calc(100vw - 24px);
    margin: 0 12px;
    padding: 24px 22px;
    max-width: 380px;
  }
  .titreLogin { font-size: 22px; letter-spacing: 4px; }
  .sousTitre  { font-size: 9.5px; line-height: 1.5; }
  #ecranLogin::before { font-size: 320px; }   /* réduit le halo décoratif */

  /* ===== Formulaire approvisionnements : déjà géré en local, on ne touche pas ===== */
}


/* ============================================================
   XS : Petit téléphone (≤ 380 px)
   ============================================================ */
@media (max-width: 380px) {

  body { font-size: 12.5px; }

  .entete .droite #horloge { display: none; }   /* l'horloge HH:MM:SS cède la place au minuteur */
  .entete .logo span { display: none; }          /* "LOM" caché, "SIG" suffit à la marque */
  .entete .badgeRole { font-size: 9px; padding: 3px 8px; }

  .grilleKpi { grid-template-columns: 1fr; }    /* KPI en 1 colonne */
  .kpi .valeur { font-size: 22px; }
  .contenu { padding: 12px 12px 24px; }
  .panneau .tete { padding: 8px 10px; font-size: 10px; letter-spacing: 1px; }
  .panneau tr.ligne-carte { padding: 3px 10px; }
  .panneau tr.ligne-carte td { grid-template-columns: 42% 1fr; font-size: 11.5px; }

  .filig-wrap > span { display: none; }         /* très petits écrans : drapeau seul, marque discrète */

  .boiteLogin { padding: 20px 18px; }
  .boiteLogin .titreLogin { font-size: 19px; letter-spacing: 3px; }
  .boiteLogin .embleme { width: 60px; height: 60px; }
  .boiteLogin .embleme .drapeauEmbleme { width: auto; height: 44px; }

  .tabbar { height: 52px; }
  body { padding-bottom: 52px; }
  .filig-wrap { bottom: calc(52px + 6px); }
}