:root {
  --bleu: #1d3557;
  --bleu-clair: #457b9d;
  --rouge: #e63946;
  --vert: #2a9d8f;
  --fond: #f7f7f5;
  --bordure: #dcdcd6;
  --texte: #1c1c1c;
  --rayon: 8px;
  --barre-h: 72px;
}

/* ------------------------------------------------------------ base ---- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  margin: 0;
  line-height: 1.4;
}

h2 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); margin: 0 0 1rem; overflow-wrap: anywhere; }
h3 { font-size: 1.1rem; margin: 0 0 0.8rem; }
a { color: var(--bleu-clair); }

/* ------------------------------------------------------ en-tete, menu ---- */

header.topbar {
  background: var(--bleu);
  color: white;
  padding: 0.75rem max(1.5rem, env(safe-area-inset-right)) 0.75rem max(1.5rem, env(safe-area-inset-left));
}
header.topbar h1 { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.2rem); margin: 0; }
header.topbar .precision { font-weight: normal; opacity: 0.85; }

nav.main {
  background: var(--bleu-clair);
  padding: 0.35rem max(1.5rem, env(safe-area-inset-right)) 0.35rem max(1.5rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
nav.main::-webkit-scrollbar { display: none; }
nav.main a {
  color: white; text-decoration: none; font-size: 0.92rem; white-space: nowrap;
  padding: 0.5rem 0.8rem; border-radius: 999px;
}
nav.main a.actif { background: rgba(255, 255, 255, 0.2); }
@media (hover: hover) { nav.main a:hover { background: rgba(255, 255, 255, 0.2); } }
nav.main form { margin: 0 0 0 auto; flex-shrink: 0; }
nav.main .btn-verrou { background: rgba(0, 0, 0, 0.22); white-space: nowrap; }
nav.main .court { display: none; }
nav.main .icone-verrou { display: none; }

main {
  padding: 1.5rem max(1.5rem, env(safe-area-inset-right)) 1.5rem max(1.5rem, env(safe-area-inset-left));
  max-width: 1200px;
  margin: 0 auto;
}

/* ----------------------------------------------------- blocs, boutons ---- */

.card {
  background: white;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}
.card.etroite { max-width: 480px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  background: var(--bleu);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .btn:hover { background: var(--bleu-clair); } }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.danger { background: var(--rouge); }
.btn.secondary { background: #6c757d; }
.btn.succes { background: var(--vert); }
.btn.small { min-height: 32px; padding: 0.25rem 0.7rem; font-size: 0.82rem; }
.btn.bloc { width: 100%; }
.btn.grand { min-height: 54px; font-size: 1.15rem; font-weight: 600; }
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn.small { min-height: 40px; }
}

form.inline { display: inline; }

/* Rangee de boutons d'action (liste, caisse, journal, recap). */
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.actions form { margin: 0; display: inline-flex; }

.entete-page {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem;
}
.entete-page h2 { margin: 0; }
.entete-page .actions { margin: 0; }

/* ---------------------------------------------------------- chiffres ---- */

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stats.x4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-box {
  background: white; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem;
  min-width: 0;
}
.stat-box .label { font-size: 0.8rem; color: #666; }
.stat-box .value { font-size: 1.5rem; font-weight: bold; margin-top: 0.3rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stat-box.positif .value { color: var(--vert); }
.stat-box.negatif .value { color: var(--rouge); }

/* ---------------------------------------------------------- tableaux ---- */

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { border: 1px solid var(--bordure); padding: 0.45rem 0.6rem; text-align: left; vertical-align: middle; }
th { background: #eef1f5; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total-row td { font-weight: bold; background: #f0f4f8; }
td.action-cell { white-space: nowrap; text-align: right; }
.nowrap { white-space: nowrap; }

/* ----------------------------------------------------------- formulaires ---- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.form-grid.une-colonne { grid-template-columns: minmax(0, 1fr); }
.form-grid.nom-prix { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.form-grid label { display: block; margin-bottom: 0.25rem; font-size: 0.85rem; color: #444; }
.form-grid input, .form-grid select, .form-grid textarea, table input {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  /* 16 px minimum : l'iPhone ne zoome plus quand on touche un champ. */
  font: inherit;
  font-size: 16px;
  background: white;
}
.form-grid input:focus, .form-grid select:focus, table input:focus {
  outline: 2px solid var(--bleu-clair); outline-offset: 1px; border-color: var(--bleu-clair);
}

.flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.flash.error { background: #fdecea; color: #a4262c; border: 1px solid #f0b4ae; }
.flash.success { background: #e7f6ec; color: #14652f; border: 1px solid #a9dcb8; }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 10px; font-size: 0.75rem; background: #eee; vertical-align: middle; white-space: nowrap; }
.badge.cloture { background: var(--rouge); color: white; }
.badge.ouvert { background: var(--vert); color: white; }

.disclaimer {
  font-size: 0.78rem; color: #777; margin-top: 2rem;
  border-top: 1px solid var(--bordure); padding-top: 0.6rem;
}

/* ------------------------------------------------------------- caisse ---- */

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "produits" "panier" "extras";
  gap: 0 1.5rem;
}
.zone-produits { grid-area: produits; }
.zone-panier { grid-area: panier; }
.zone-extras { grid-area: extras; }

.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 0.7rem; }
.produit-btn {
  position: relative;
  flex-direction: column;
  min-height: 84px;
  padding: 0.8rem 0.5rem;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.produit-btn .prix { font-weight: bold; margin-top: 0.2rem; }
.produit-btn .qte {
  position: absolute; top: -8px; right: -6px;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  background: var(--vert); color: white; font-size: 0.85rem; font-weight: bold;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.produit-btn.dans-panier .qte { display: inline-flex; }
.produit-btn.dans-panier { box-shadow: inset 0 0 0 3px var(--vert); }

#liste-panier { list-style: none; padding: 0; margin: 0 0 0.8rem; }
#liste-panier li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0; border-bottom: 1px solid #eee;
}
#liste-panier .nom { overflow-wrap: anywhere; }
#liste-panier .quantites { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
#liste-panier .quantites .btn { min-width: 42px; padding: 0.2rem 0.6rem; font-size: 1.1rem; }
.total-panier { font-size: 1.3rem; font-weight: bold; margin: 0.5rem 0 0.8rem; font-variant-numeric: tabular-nums; }
.pile { display: grid; gap: 0.6rem; }
#liste-dernieres-ventes { padding-left: 1.2rem; margin: 0; }
#liste-dernieres-ventes li { padding: 0.15rem 0; }
#message-vente { font-weight: bold; min-height: 1.4em; margin: 0.8rem 0 0; }

/* Barre du bas (telephone) : total et bouton Encaisser toujours a portee. */
.barre-encaisser {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; align-items: center; gap: 0.75rem;
  min-height: var(--barre-h);
  padding: 0.6rem max(0.75rem, env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: var(--bleu); color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}
.barre-encaisser .resume {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: white;
  font: inherit; padding: 0; cursor: pointer;
}
.barre-encaisser .resume small { display: block; opacity: 0.8; font-size: 0.8rem; }
.barre-encaisser .resume strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.barre-encaisser .btn { min-width: 42%; }

/* ----------------------------------------------------------- cloture ---- */

table.comptage input { max-width: 110px; text-align: center; }
table.comptage td:first-child { white-space: nowrap; }
.resume-cloture {
  position: sticky; bottom: 0; z-index: 20;
  margin: 1rem -1.2rem -1.2rem; padding: 0.9rem 1.2rem calc(0.9rem + env(safe-area-inset-bottom));
  background: white; border-top: 1px solid var(--bordure);
  border-radius: 0 0 var(--rayon) var(--rayon);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.06);
}
.resume-cloture .ligne-total { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.1rem; font-weight: bold; }
#ecart-preview { font-weight: bold; margin: 0.3rem 0 0.8rem; }
.resume-cloture .actions { margin: 0; }

/* ------------------------------------------------ tablette et ordinateur ---- */

@media (min-width: 760px) {
  .pos-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr);
    grid-template-areas: "produits panier" "extras panier";
    align-items: start;
  }
  /* Le panier suit le defilement de la grille de produits. */
  .zone-panier { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
}

/* ---------------------------------------------------------- tablette ---- */

@media (max-width: 899px) {
  .stats.x4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- telephone ---- */

@media (max-width: 759px) {
  .barre-encaisser.visible { display: flex; }
  body:not(.avec-barre) #message-vente:not(:empty) { bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important; }
  body.avec-barre main { padding-bottom: calc(var(--barre-h) + 1.5rem + env(safe-area-inset-bottom)); }
  .zone-panier .btn-encaisser-panier { display: none; }
  /* Message de vente : bulle au-dessus de la barre, visible ou qu'on soit. */
  #message-vente:not(:empty) {
    position: fixed; left: 0.75rem; right: 0.75rem; z-index: 60;
    bottom: calc(var(--barre-h) + 0.6rem + env(safe-area-inset-bottom));
    margin: 0; padding: 0.75rem 1rem; text-align: center;
    background: white; border-radius: var(--rayon); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
}

@media (max-width: 599px) {
  header.topbar .precision { display: none; }
  header.topbar, nav.main { padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); }
  nav.main { gap: 0.2rem; justify-content: space-between; }
  nav.main a { padding: 0.5rem 0.6rem; font-size: 0.88rem; }
  nav.main .long { display: none; }
  nav.main .court { display: inline; }
  nav.main form { margin-left: 0; }
  nav.main .btn-verrou { padding: 0.25rem 0.55rem; }
  main { padding: 1rem max(0.75rem, env(safe-area-inset-right)) 1.5rem max(0.75rem, env(safe-area-inset-left)); }
  body.avec-barre main { padding-bottom: calc(var(--barre-h) + 1rem + env(safe-area-inset-bottom)); }

  .card { padding: 0.9rem; margin-bottom: 0.9rem; }
  .card.etroite { max-width: none; }

  .entete-page { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions > .btn, .actions form, .actions form .btn { width: 100%; }
  .actions > :only-child, .actions > .pleine-largeur { grid-column: 1 / -1; }
  .btn.bloc-mobile { width: 100%; }

  .stats { gap: 0.5rem; margin-bottom: 0.9rem; }
  .stat-box { padding: 0.6rem 0.65rem; }
  .stat-box .label { font-size: 0.7rem; line-height: 1.2; }
  .stat-box .value { font-size: 1.05rem; }

  .form-grid, .form-grid.nom-prix { grid-template-columns: minmax(0, 1fr); }

  .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .produit-btn { min-height: 78px; font-size: 0.95rem; padding: 0.7rem 0.4rem; }

  .resume-cloture { margin: 1rem -0.9rem -0.9rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  table.comptage th, table.comptage td { padding: 0.35rem 0.4rem; }
  table.comptage input { max-width: none; }

  /* Tableaux en fiches : une ligne = une carte, chaque valeur avec son libelle. */
  table.fiches, table.fiches tbody, table.fiches tr, table.fiches td { display: block; width: 100%; }
  table.fiches { font-size: 0.95rem; }
  table.fiches thead { display: none; }
  table.fiches tr {
    display: flex; flex-direction: column;
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; background: white;
  }
  table.fiches tr:last-child { margin-bottom: 0; }
  table.fiches td {
    border: 0; padding: 0.3rem 0;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    text-align: right; white-space: normal;
  }
  table.fiches td::before { content: attr(data-label); color: #666; font-size: 0.82rem; text-align: left; flex-shrink: 0; }
  table.fiches td:empty { display: none; }
  table.fiches td.titre-ligne { order: -1; font-weight: bold; font-size: 1.02rem; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
  table.fiches td.titre-ligne::before, table.fiches td.vide::before, table.fiches td.action-cell::before { content: none; }
  table.fiches td.action-cell { padding-top: 0.5rem; }
  table.fiches td.action-cell > .btn, table.fiches td.action-cell form, table.fiches td.action-cell form .btn { width: 100%; }
  table.fiches td.vide { justify-content: center; text-align: center; color: #666; }
  table.fiches tr.total-row { background: #f0f4f8; }
  table.fiches tr.total-row td { background: transparent; }
  .card > table.fiches { margin: 0; }
}

/* ------------------------------------------------ tres petits ecrans ---- */

@media (max-width: 380px) {
  nav.main a { padding: 0.5rem 0.45rem; font-size: 0.84rem; }
  nav.main .long-verrou { display: none; }
  nav.main .icone-verrou { display: inline; }
  .stat-box { padding: 0.55rem 0.5rem; }
  .stat-box .value { font-size: clamp(0.85rem, 4.2vw, 1.05rem); }
  .actions .btn { font-size: 0.86rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  .produit-btn { font-size: 0.9rem; }
  .barre-encaisser .resume strong { font-size: 1.2rem; }
}