* { box-sizing: border-box; }

html, body {
  touch-action: manipulation; /* empêche le double-tap-to-zoom */
  -webkit-user-select: none;
  user-select: none; /* évite la sélection de texte accidentelle sur taps répétés */
  /* Filet de sécurité : un élément mal contenu (toolbar qui ne wrap pas, tableau trop large...)
     ne doit jamais faire scroller toute la page horizontalement — seuls les conteneurs qui
     déclarent explicitement overflow-x:auto doivent scroller. overflow-y explicite à côté :
     certains moteurs n'appliquent pas correctement la règle CSS qui bascule l'axe non précisé
     sur "auto" et finissent par bloquer aussi le scroll vertical si on ne le précise pas.
     Constaté en test réel (dashboard.html/admin.html/inventaire.html plus scrollables du tout). */
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f4f4f5;
  color: #1a1a1a;
  /* Ni "none" ni "contain" : les deux désactivent carrément le scroll à la molette/trackpad sur
     l'élément racine dans Chromium (confirmé en test réel — seul "auto", la valeur par défaut,
     laisse vraiment scroller). Le confort du "pas de rebond en bord d'écran" ne vaut pas de
     casser le scroll — symptôme signalé plusieurs fois comme "impossible de scroller" alors que
     le contenu était bien là et bien dimensionné. Propriété retirée plutôt que mise à "auto"
     explicitement, pour ne pas réintroduire la même régression si quelqu'un la "corrige" plus
     tard en la mettant à "contain" en pensant que c'est plus sûr que "none". */
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  background: #1f2937;
  color: white;
  /* Toujours accessible même après un scroll (ex. re-rendu suite à une action) — sans ça, la
     nav peut sortir de l'écran sans moyen simple d'y revenir. */
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.logo-link {
  display: inline-flex;
  line-height: 0;
}

.logo {
  height: 40px;
  width: auto;
}

.topbar h1 {
  font-size: 1.1rem;
  margin: 0;
}

.location-badge {
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 40px;
}

.modal-location-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.modal-location-options button {
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.modal-location-options button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.modal-device-name-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}

.modal-optional {
  font-weight: 400;
  color: #9ca3af;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 18px;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  background: #374151;
  color: white;
  cursor: pointer;
}

.tab-btn.active {
  background: #2563eb;
}

/* Repère visuel "on est en zone mode avancé" : Supervision et le bouton de retour, tous deux
   teintés ambre pour se démarquer des onglets de navigation normaux (visibles dès qu'on est
   authentifié, indépendamment de la vue actuellement affichée). */
.tab-btn-advanced {
  background: #b45309;
  cursor: pointer;
}
/* Vue Supervision actuellement affichée : ambre plus foncé, comme .tab-btn.active pour les
   onglets normaux. */
.tab-btn-advanced.active {
  background: #7c3610;
}

/* Bouton "verrouiller le mode avancé" : icône seule plutôt qu'un libellé "↩ Retour" qui prend
   la même largeur qu'un onglet de destination alors que ce n'est pas une destination — juste une
   action. Présent sur les 6 pages en mode avancé (index/inventaire le masquent tant que non
   authentifié ; dashboard/admin/assistant ne sont accessibles qu'après auth donc toujours visible). */
.tab-btn-lock {
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1;
}

a.tab-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* a.tab-btn (specificité 0,1,1) l'emportait sur la règle [hidden] du navigateur (0,1,0) : un
   lien de nav mis à hidden=true en JS (updateNav) restait visible quand même — bug réel constaté
   en production (Inventaire/Tableau de bord/Admin catalogue/Assistant visibles en mode caissier
   malgré hidden correctement positionné). .tab-btn[hidden] a une spécificité de 0,2,0, suffisante
   pour regagner la priorité peu importe l'ordre des règles dans la feuille de style. */
.tab-btn[hidden] {
  display: none;
}

.btn-offline-toggle {
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  white-space: nowrap;
}

.btn-offline-toggle:disabled {
  opacity: .6;
  cursor: default;
}

/* En ligne = repère discret (fond neutre) ; hors ligne forcé = repère volontairement voyant
   (ambre), pour que ce ne soit jamais un état oublié par erreur. */
.btn-offline-toggle.is-offline {
  background: #b45309;
  border-color: #b45309;
}

.btn-refresh {
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  line-height: 1;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
}

.btn-refresh:active {
  background: rgba(255, 255, 255, 0.2);
}

.storage-warning {
  background: #fef3c7;
  color: #92400e;
  padding: 10px 20px;
  font-size: 0.88rem;
  border-bottom: 1px solid #fde68a;
}

.storage-warning[hidden] {
  display: none;
}

main {
  padding: 16px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

/* --- Commande --- */

.commande-layout {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: 16px;
  align-items: start;
}

.catalogue {
  min-width: 0; /* évite que la grille de produits ne force la colonne à s'élargir */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.categorie h2 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 2px;
  border-left: 4px solid var(--cat-color, #9ca3af);
  padding-left: 8px;
}

.produits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 6px;
}

.produit-btn {
  background: var(--cat-bg, white);
  border: 1px solid var(--cat-border, #d1d5db);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  transition: transform 0.05s ease, background 0.15s ease;
}

.produit-btn:hover {
  filter: brightness(0.97);
}

.produit-btn:active {
  transform: scale(0.96);
  filter: brightness(0.93);
}

.produit-icon {
  font-size: 1.15rem;
  line-height: 1.1;
  min-height: 1.15rem;
}

.icon-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.produit-nom {
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.15;
}

.produit-sub {
  font-size: 0.62rem;
  color: #6b7280;
  line-height: 1.1;
}

.produit-jetons {
  font-size: 0.68rem;
  color: var(--cat-accent, #2563eb);
  font-weight: 600;
}

/* Couleurs par catégorie (bordure d'en-tête, teinte de fond des boutons, accent jetons) */
.categorie[data-category="eaux"]        { --cat-color: #0ea5e9; }
.categorie[data-category="softs"]       { --cat-color: #06b6d4; }
.categorie[data-category="bieres"]      { --cat-color: #b45309; }
.categorie[data-category="vin"]         { --cat-color: #9d174d; }
.categorie[data-category="cocktails"]   { --cat-color: #7c3aed; }
.categorie[data-category="snack"]       { --cat-color: #65a30d; }
.categorie[data-category="carafes"]     { --cat-color: #0d9488; }
.categorie[data-category="food"]        { --cat-color: #dc2626; }

.produit-btn[data-category="eaux"]      { --cat-bg: #f0f9ff; --cat-border: #bae6fd; --cat-accent: #0284c7; }
.produit-btn[data-category="softs"]     { --cat-bg: #ecfeff; --cat-border: #a5f3fc; --cat-accent: #0891b2; }
.produit-btn[data-category="bieres"]    { --cat-bg: #fffbeb; --cat-border: #fde68a; --cat-accent: #b45309; }
.produit-btn[data-category="vin"]       { --cat-bg: #fdf2f8; --cat-border: #fbcfe8; --cat-accent: #9d174d; }
.produit-btn[data-category="cocktails"] { --cat-bg: #f5f3ff; --cat-border: #ddd6fe; --cat-accent: #7c3aed; }
.produit-btn[data-category="snack"]     { --cat-bg: #f7fee7; --cat-border: #d9f99d; --cat-accent: #65a30d; }
.produit-btn[data-category="carafes"]   { --cat-bg: #f0fdfa; --cat-border: #99f6e4; --cat-accent: #0d9488; }
.produit-btn[data-category="food"]      { --cat-bg: #fef2f2; --cat-border: #fecaca; --cat-accent: #dc2626; }

.panier {
  flex: 1 1 280px;
  background: white;
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.panier h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

/* Tiroir mobile (voir @media plus bas) : masqués par défaut sur tablette/desktop, où le panier
   reste dans la colonne latérale classique sans bouton de fermeture ni barre compacte. */
.panier-close,
.panier-backdrop,
.panier-mobile-bar {
  display: none;
}

.panier-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 45dvh;
  overflow-y: auto;
}

.panier-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px;
}

.panier-item-nom {
  flex: 1;
  font-size: 0.92rem;
}

.panier-item-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.qty-btn:hover {
  background: #e5e7eb;
}

.qty-value {
  min-width: 22px;
  text-align: center;
  font-weight: 600;
}

.panier-vide {
  color: #9ca3af;
  font-style: italic;
  font-size: 0.9rem;
}

.panier-total {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

.total-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}

.total-ligne strong {
  font-size: 1.3rem;
  color: #1f2937;
}

.total-euros {
  color: #6b7280;
  font-size: 0.9rem;
}

.panier-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.panier-actions .btn-secondary {
  flex: 1;
  padding: 14px 10px;
}

.panier-actions .btn-secondary:disabled {
  color: #d1d5db;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.panier-actions .btn-valider {
  flex: 2;
}

.btn-valider {
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: #16a34a;
  color: white;
  cursor: pointer;
}

.btn-valider:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
}

.btn-valider:hover:not(:disabled) {
  background: #15803d;
}

.btn-secondary {
  padding: 12px 18px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-size: 1rem;
}

.btn-danger {
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  background: #dc2626;
  color: white;
  cursor: pointer;
  font-size: 1rem;
}

.btn-danger:hover {
  background: #b91c1c;
}

/* --- Supervision --- */

.supervision-filter {
  padding: 16px 20px 0;
}

.supervision-filter label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: #6b7280;
  max-width: 220px;
}

.supervision-filter select {
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.sync-status {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.dash-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.dash-link:hover {
  text-decoration: underline;
}

.supervision-layout {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.supervision-bloc {
  flex: 1 1 380px;
  min-width: 0; /* sinon un tableau large force ce bloc (et donc toute la page) à s'élargir
                   au lieu de rester dans .table-scroll et de scroller localement */
  background: white;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.supervision-bloc h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.table-scroll {
  overflow-x: auto;
}

.table-compteurs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table-compteurs th, .table-compteurs td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #f0f0f0;
}

.table-compteurs tfoot td {
  font-weight: 700;
  border-top: 2px solid #d1d5db;
  border-bottom: none;
}

.historique-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.historique-actions .btn-secondary,
.historique-actions .btn-danger {
  font-size: 0.85rem;
  padding: 9px 12px;
}

.historique-actions-danger {
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
  margin-top: 4px;
}

.historique-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.historique-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.historique-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  margin-bottom: 4px;
}

.historique-item-detail {
  color: #4b5563;
}

.historique-edit-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.historique-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed #e5e7eb;
}

.historique-edit-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.historique-edit-stepper button {
  width: 30px;
  height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.historique-edit-stepper span {
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.historique-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.historique-edit-actions button {
  padding: 8px 12px;
  font-size: 0.8rem;
}

/* --- Modale --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
  z-index: 50;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 90%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  /* Explicite : sans ça, un overflow-y défini seul fait passer overflow-x en "auto" par défaut
     (règle CSS), donc le moindre débordement d'un enfant (table large, etc.) rendait la modale
     elle-même scrollable horizontalement au lieu que ce soit son enfant dédié qui le fasse. */
  overflow-x: hidden;
}

.modal h3 {
  margin-top: 0;
}

.modal-recap {
  font-size: 0.92rem;
  color: #374151;
  margin-bottom: 16px;
}

.modal-password-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin: 4px 0 6px;
}

.modal-password-error {
  color: #dc2626;
  font-size: 0.82rem;
  margin: 0 0 8px;
}

.modal-recap ul {
  padding-left: 18px;
  margin: 8px 0;
}

.modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: #374151;
  margin-bottom: 16px;
  cursor: pointer;
}

.modal-checkbox input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.note-offert {
  font-size: 0.8rem;
  color: #9ca3af;
  margin: 8px 0 0;
}

.badge-offert {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* En dessous de cette largeur (téléphone, y compris les grands modèles récents en portrait),
   deux colonnes deviennent trop étroites pour rester utilisables : on repasse en pile. Les
   tablettes visées (9" et plus, y compris en portrait) restent au-dessus de ce seuil et gardent
   le panier à droite. Même seuil que le bloc juste en dessous : les deux couvrent le "layout
   téléphone" et doivent basculer ensemble, pas à des largeurs différentes. */
@media (max-width: 640px) {
  .commande-layout {
    display: flex;
    flex-direction: column;
    /* align-items: start (hérité de la version grille desktop, pensé pour aligner .panier en
       haut) fait aussi rétrécir .catalogue à son contenu au lieu de l'étirer sur toute la
       largeur en colonne flex — c'est ce qui plafonnait la grille de produits à 3 colonnes quel
       que soit le minmax() choisi, .catalogue ne faisant plus que ~216px de large sur un écran
       de 386px. */
    align-items: stretch;
  }

  .panier {
    position: static;
  }
}

/* Layout téléphone : au-delà du simple empilement ci-dessus, on resserre les espacements pensés
   pour tablette (paddings 20px, gros titres) qui gaspillent trop de place sur un écran étroit. */
@media (max-width: 640px) {
  .topbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .logo {
    height: 30px;
  }

  /* Le titre textuel ("Bar — FMF 2026") n'apporte rien que le logo ne dise déjà — masqué
     visuellement sur téléphone pour libérer de la place (reste lisible aux lecteurs d'écran). */
  .topbar h1 {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* Avec jusqu'à 4 boutons (Commande/Inventaire/Supervision/Retour), même resserrée la nav ne
     tient pas forcément sur une ligne de ~370px — plutôt que de la laisser wrapper sur 2-3
     lignes en plus de la marque, on la rend défilable horizontalement : ligne 1 = marque, ligne
     2 = nav (scroll si besoin) + refresh, jamais plus de 2 lignes garanties. */
  .topbar-brand {
    flex-basis: 100%;
  }

  .tabs {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }

  .tab-btn {
    flex-shrink: 0;
    padding: 7px 10px;
    font-size: 0.78rem;
  }

  .btn-refresh {
    flex-shrink: 0;
  }

  .location-badge {
    padding: 8px 12px;
    font-size: 0.8rem;
    min-height: 36px;
  }

  main {
    padding: 0;
  }

  .commande-layout,
  .supervision-layout {
    padding: 10px;
    gap: 10px;
  }

  /* 62px (au lieu de 92px sur tablette) : sur téléphone en portrait, le panier passe en tiroir
     sous la grille (voir .panier plus bas) au lieu d'occuper une colonne latérale — l'espace ainsi
     libéré doit servir à caser plus de cartes par ligne (jusqu'à 5 sur la plupart des téléphones
     en portrait), pas à étirer des cartes déjà larges pour peu de contenu. */
  .produits-grid {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 5px;
  }

  .produit-btn {
    min-height: 50px;
    padding: 5px 3px;
  }

  .produit-icon {
    font-size: 1.7rem;
  }

  .produit-nom {
    font-size: 0.68rem;
  }

  .produit-sub,
  .produit-jetons {
    font-size: 0.58rem;
  }

  .panier,
  .supervision-bloc {
    padding: 12px;
  }

  /* Un panier ouvert en permanence (même vide) prenait jusqu'à la moitié de l'écran avec
     beaucoup de vide (steppers disabled, pas de liste) : plutôt que de deviner une hauteur, il
     devient un tiroir fermé par défaut — une barre compacte à hauteur fixe (jamais de vh) reste
     visible en bas, et ouvre le panier complet au tap. */
  .panier {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* dvh (pas vh) : sur mobile, vh se base sur la hauteur d'écran totale (barre du navigateur
       masquée comprise), plus grande que ce qui est réellement visible — le tiroir, positionné
       en bottom:0 par rapport à cette hauteur virtuelle, se retrouvait en partie hors du
       viewport visible (bug réel constaté : tiroir "coincé" en bas, bouton ✕ visuellement présent
       mais hors de la zone cliquable réelle). dvh suit la hauteur de viewport réellement visible. */
    max-height: 82dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
    z-index: 45;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.22s ease;
  }

  .panier.is-open {
    transform: translateY(0);
  }

  .panier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .panier-head h2 {
    margin: 0;
  }

  .panier-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 1.1rem;
    cursor: pointer;
  }

  .panier-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 41;
  }

  .panier-backdrop.is-open {
    display: block;
  }

  .panier-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 14px 18px;
    border: none;
    border-radius: 14px;
    background: #1f2937;
    color: white;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 35;
  }

  .panier-mobile-bar.has-items {
    background: #2563eb;
  }

  .panier-mobile-cta {
    font-weight: 700;
  }

  /* Marge pour que les derniers produits ne soient pas cachés sous la barre mobile fixée. */
  .catalogue {
    padding-bottom: 80px;
  }

  .table-compteurs {
    font-size: 0.78rem;
    table-layout: fixed;
  }

  /* Sur 2 lignes plutôt que d'imposer une seule ligne large ("Unités payantes" etc.) qui forçait
     le tableau — et donc toute la page — à s'élargir au-delà de l'écran. */
  .table-compteurs th {
    padding: 5px 4px;
    white-space: normal;
    line-height: 1.2;
  }

  .table-compteurs td {
    padding: 5px 4px;
    white-space: nowrap;
  }

  .table-compteurs th:first-child, .table-compteurs td:first-child {
    width: 26%;
  }

  .modal {
    padding: 16px;
    width: 94%;
  }

  .supervision-filter,
  .avance-toolbar {
    padding-left: 12px;
    padding-right: 12px;
  }
}