/* ============================================================================
   RESPONSIVE (plan etude/PLAN_RESPONSIVE.md) - règles ADDITIVES uniquement.
   - app.css n'est jamais modifié : toute adaptation vit ici, chargée après.
   - Chaque media query est "screen and" : la boîte d'impression A4 (~794 px)
     ne doit recevoir AUCUNE de ces règles (le bon de commande imprimé est figé).
   - Paliers : 1024 (tablette), 900/760 (étroit), 560 (téléphone).
   - Rendu >= 1025 px : strictement identique (diff pixel contrôlé au harnais).
   ========================================================================== */

/* Éléments nouveaux : inertes en desktop (aucun rendu) */
.menu-mobile-btn { display: none; }
.menu-mobile-panneau { display: none; }
.barre-panier-mobile { display: none; }
.aide-tactile { display: none; }
/* Bascule d'entreprise au doigt : la classe .ouvert est posée par JS (pointer coarse) */
.tenant-badge.a-choix.ouvert .tenant-menu { display: block; }

/* ---------------------------------------------------------------- tablette */
@media screen and (max-width: 1024px) {
  .page { padding: 32px 20px 56px; }
  .topbar-inner { padding: 14px 20px; gap: 16px; }
  /* Tableaux : c'est le tableau qui défile, jamais la page */
  table.liste { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media screen and (max-width: 900px) {
  /* Les gabarits « liste + formulaire latéral » posés en inline (3fr 2fr)
     passent en une colonne (l'inline ne peut être battu que par !important) */
  .grille-2 { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------ étroit */
@media screen and (max-width: 760px) {
  input, select, textarea { font-size: 16px; }  /* pas de zoom iOS au focus */
  .flash { overflow-wrap: anywhere; }

  /* Topbar compacte : logo seul, badge entreprise réduit au logo, liens repliés */
  .topbar-inner { gap: 12px; padding: 12px 14px; }
  .brand-sous { display: none; }
  .tenant-badge { padding-left: 12px; gap: 8px; }
  .tenant-badge > span:not(.tenant-chevron) { display: none; }
  .topbar-user { display: none; }
  .topbar-droite { gap: 14px; }
  .topbar-droite .nav-lien { display: none; }
  .menu-mobile-btn { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: none; border: 1px solid rgba(191, 167, 77, .55);
    border-radius: 6px; color: var(--blanc); font-size: 17px; cursor: pointer; }
  .menu-mobile-panneau.ouvert { display: block; background: var(--vert);
    border-top: 1px solid rgba(191, 167, 77, .35); }
  .menu-mobile-panneau a { display: block; padding: 13px 20px; color: var(--blanc);
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 1px solid rgba(250, 248, 243, .08); }
  .menu-mobile-panneau .identite { padding: 12px 20px 6px; color: var(--gris-clair); font-size: 12px; }

  /* Onglets et filtres : une seule ligne qui défile */
  .onglets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 22px; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { white-space: nowrap; }

  /* Aide des champs : le survol n'existe pas au doigt, le texte s'affiche */
  .aide-tactile { display: block; font-size: 12.5px; color: var(--gris); margin-top: 5px; }
  .info-i { display: none; }

  /* Formulaires posés dans des cellules de tableau (facturation) */
  table.liste td form { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- téléphone */
@media screen and (max-width: 560px) {
  .page { padding: 20px 13px 44px; }
  .titre-page { font-size: clamp(30px, 9vw, 44px) !important; }

  /* Cartes du catalogue : une colonne pleine largeur */
  .grille { grid-template-columns: 1fr; gap: 22px; }

  /* Modale produit : plein écran */
  .modale-fond { padding: 0; }
  .modale { max-width: 100%; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }

  /* Ligne du panier : quantités et total passent ensemble sous le libellé */
  .ligne-article { flex-wrap: wrap; }
  .ligne-article .infos { flex: 1 1 60%; }
  .ligne-article .qty { margin-left: 80px; }
  .ligne-article .total { margin-left: auto; }
  .champ-perso-ligne { max-width: 100%; }

  /* Suggestions « Pensez-y aussi » : une ligne qui défile.
     Surtout PAS de min-width sur les cartes : la largeur minimale du flex
     se propagerait au viewport mobile et dézoomerait toute la page. */
  .suggestions { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 12px; scrollbar-width: none; }
  .suggestions::-webkit-scrollbar { display: none; }
  .suggestion { flex: 1 0 auto; }

  /* Datepicker : calendrier sur toute la largeur du champ, cases tactiles */
  .dp-cal { left: 0; right: 0; }
  .dp-cal button { min-height: 40px; min-width: 38px; }

  /* Barre basse du panier : total + action toujours visibles */
  .barre-panier-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 90; align-items: center; gap: 14px; background: var(--vert); color: var(--blanc);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px rgba(4, 56, 59, .25); }
  .barre-panier-mobile .lib { font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--or); }
  .barre-panier-mobile .mnt { font-size: 19px; font-weight: 600; }
  .barre-panier-mobile .btn-verifier { margin-left: auto; width: auto; padding: 12px 18px; }
  #form-commande { padding-bottom: 84px; }
  .toast { bottom: 96px; }

  /* Suivi : saisies du signalement (largeur posée en inline) */
  .signalement input[type="number"] { width: 72px !important; }

  /* Planning : une colonne par jour, barre de semaine sur deux lignes */
  .planning-grille { grid-template-columns: 1fr; }
  .planning-barre { flex-wrap: wrap; gap: 10px; }

  /* Reporting : graphes moins hauts */
  .graphe-cadre { height: 230px; }

  /* Confirmation : boutons empilés pleine largeur */
  .confirm-boutons { flex-direction: column; align-items: stretch; }

  /* Bascule d'entreprise : menu ancré sous la barre, pleine largeur */
  .tenant-menu { position: fixed; left: 10px; right: 10px; top: 62px; padding-top: 0; }
  .tenant-menu > * { min-width: 0; }
}