/* ============================================================================
   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; }

  /* Filtre du journal (entreprise + recherche) : tenu en une seule ligne, il
     poussait la page à 540 px de large sur un écran de 390. Le repli vit ici et
     pas en attribut de style pour que le rendu au-delà de 760 px ne bouge pas. */
  .filtres-ecran { flex-wrap: wrap; }
  .filtres-ecran input[type="text"] { width: 100% !important; max-width: 260px; }

  /* Onglets d'écran du back-office (journal, planning, facturation, événements) :
     la barre était posée sans repli ni fourreau et poussait la page à 453 px de
     large sur un téléphone de 390. Même traitement que .onglets : le bloc défile
     dans son propre cadre. */
  .planning-vues { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .planning-vues::-webkit-scrollbar { display: none; }

  /* Frise d'états : sept événements d'historique sur la fiche d'une commande
     étalaient la page jusqu'à 529 px. Le fourreau défile à sa place ; la page de
     suivi publique, qui n'aligne que trois ou quatre états, tient sans défiler. */
  .arbre { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .arbre::-webkit-scrollbar { display: none; }

  /* Sélecteur de la barre de travail : app.css lui impose 13 px avec une
     spécificité que la règle anti-zoom ci-dessus ne bat pas, d'où une boîte de
     31 px de haut à côté de champs de 44 à 49 px, et le zoom iOS au focus. */
  .barre-contexte-form select { font-size: 16px; padding: 8px 10px; }

  /* 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; }

  /* Exports du reporting : quatre boutons tenus en une ligne par un style posé
     en attribut poussaient la page à 513 px de large sur un téléphone de 390.
     Ils passent à la ligne. Le !important bat l'attribut, comme pour .grille-2
     plus haut ; c'est la seule façon de le battre. */
  .exports-boutons { flex-wrap: wrap !important; }
}

/* --------------------------------------------------------------- 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; }
  /* Le pied tient le bas de la fenêtre : sur un panier court il arrivait donc
     sous cette barre, qui masquait l'adresse et le téléphone. Il reçoit la même
     garde que le formulaire, là seulement où la barre existe (elle précède le
     pied dans la page, d'où le sélecteur de voisinage). */
  .barre-panier-mobile ~ .pied { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .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; }

  /* Dernière commande : le numéro et la date occupent toute la ligne, l'action
     sortait du cadre beige et du téléphone. Elle prend sa propre ligne, au doigt. */
  .derniere-cmd { flex-wrap: wrap; gap: 14px; }
  .derniere-cmd form { width: 100%; }
  .derniere-cmd .action-recharger { width: 100%; }

  /* 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; }
}

/* Aperçu d'une boutique cliente : bande repliée sur deux lignes */
@media (max-width: 760px) {
  .bandeau-apercu-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; font-size: 12px; }
  .bandeau-apercu .btn { margin-left: 0; }
}