:root {
  --or: #7a5c2e;
  --or-clair: #f4d78a;
  --fond: #f7f3ea;
  --surface: #ffffff;
  --texte: #2a2419;
  --texte-att: #6b6250;
  --bordure: #e3dbc7;
  --danger: #b3261e;
  --danger-fond: #fbe9e7;
  --succes: #2e6b40;
  --succes-fond: #e8f3ea;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
}
#app { min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--or); }
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--or);
  background: var(--or);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5em 1em;
}
button.secondaire { background: var(--surface); color: var(--or); }
button.danger { background: var(--danger); border-color: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  padding: 0.5em 0.6em;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--texte);
  width: 100%;
}
label { display: block; margin: 0.6em 0 0.25em; font-size: 0.9em; color: var(--texte-att); }

.marque { display: flex; align-items: center; gap: 0.6em; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-slogan { font-style: italic; opacity: 0.85; }
.marque-compacte .marque-texte strong { font-size: 1.05em; }
.marque-compacte .marque-slogan { font-size: 0.72em; }
.marque-grande { justify-content: center; margin-bottom: 0.5em; }
.marque-grande h1 { margin: 0; color: var(--or); font-size: 1.5em; }
.marque-grande .marque-slogan { font-size: 0.9em; color: var(--texte-att); }
.entete-impression { display: none; }
@media print {
  .entete-impression { display: flex; margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 2px solid var(--or); }
  .entete-impression .marque-slogan { color: #555 !important; }
}

.entete {
  background: var(--or);
  color: #fff;
  padding: 0.6em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em;
}
.entete .horloge { font-variant-numeric: tabular-nums; }
.entete nav { display: flex; gap: 0.4em; flex-wrap: wrap; }
.entete nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.3em 0.6em;
  border-radius: 6px;
  font-size: 0.9em;
}
.entete nav a.actif, .entete nav a:hover { background: rgba(255,255,255,0.2); }

main { flex: 1; padding: 1em; max-width: 1100px; margin: 0 auto; width: 100%; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1em;
  margin-bottom: 1em;
}

table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
th, td { text-align: left; padding: 0.5em 0.4em; border-bottom: 1px solid var(--bordure); }
th { color: var(--texte-att); font-weight: 600; }
tr:hover td { background: #faf7ef; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
@media (max-width: 700px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

.badge { display: inline-block; padding: 0.15em 0.55em; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
.badge.ouverte, .badge.en_stock, .badge.validee, .badge.disponible { background: var(--succes-fond); color: var(--succes); }
.badge.cloturee, .badge.vendu, .badge.annulee, .badge.epuise { background: #ece7d9; color: var(--texte-att); }
.badge.critique, .badge.ecart { background: var(--danger-fond); color: var(--danger); }

.erreur { background: var(--danger-fond); color: var(--danger); padding: 0.6em 0.8em; border-radius: var(--radius); margin: 0.6em 0; }
.info { background: #eef2fb; color: #2b4c8c; padding: 0.6em 0.8em; border-radius: var(--radius); margin: 0.6em 0; }

.stat { text-align: center; }
.stat .valeur { font-size: 1.6em; font-weight: 700; color: var(--or); }
.stat .libelle { color: var(--texte-att); font-size: 0.85em; }

/* ------------------------------------------------------------------ */
/*  Filigrane                                                          */
/*  Tout est pilote par les parametres (opacite, angle, taille) via des */
/*  variables CSS posees sur l'element.                                 */
/* ------------------------------------------------------------------ */

.porte-filigrane { position: relative; }
.filigrane {
  position: absolute;
  top: 45%; left: 0; right: 0;
  transform: translateY(-50%) rotate(var(--filigrane-angle, -20deg));
  font-size: var(--filigrane-taille, 48pt);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--danger);
  opacity: var(--filigrane-opacite, 0.3);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

/* ------------------------------------------------------------------ */
/*  Recu (ticket comptoir)                                             */
/*  Dimensions, marges, decalages de calage et tailles viennent tous    */
/*  des parametres, via les variables --recu-*.                         */
/* ------------------------------------------------------------------ */

.recu {
  width: var(--recu-largeur, 80mm);
  min-height: var(--recu-hauteur, auto);
  margin: 0 auto;
  padding: var(--recu-marge, 3mm);
  padding-top: calc(var(--recu-marge, 3mm) + var(--recu-decalage-haut, 0mm));
  padding-left: calc(var(--recu-marge, 3mm) + var(--recu-decalage-gauche, 0mm));
  background: #fff;
  color: #000;
  font-family: var(--recu-police, monospace);
  font-size: var(--recu-police-taille, 9pt);
  line-height: var(--recu-interligne, 1.3);
}
.recu-exemplaire + .recu-exemplaire {
  margin-top: 6mm;
  padding-top: 6mm;
  border-top: 1px dashed #999;
}
.recu-logo { text-align: center; margin-bottom: 1mm; }
.recu-titre {
  text-align: center;
  font-size: var(--recu-titre-taille, 13pt);
  font-weight: 700;
  line-height: 1.2;
}
.recu-slogan { text-align: center; font-style: italic; }
.recu-centre { text-align: center; }
.recu-petit { font-size: 0.85em; }
.recu-entete-texte { text-align: center; font-weight: 700; margin-top: 1mm; }
.recu-separateur { border-top: 1px dashed #000; margin: 1.5mm 0; }
.recu-ligne { display: flex; justify-content: space-between; gap: 1em; }
.recu-ligne > span:last-child { text-align: right; white-space: nowrap; }
.recu-article { margin-bottom: 0.8mm; }
.recu-article-nom { font-weight: 600; }
.recu-total { font-weight: 700; font-size: 1.1em; margin: 1mm 0; }
.recu-solde { text-align: center; font-weight: 700; margin: 1mm 0; }
.recu-code-barres {
  font-family: monospace;
  letter-spacing: 0.2em;
  margin-top: 1.5mm;
}

/* ------------------------------------------------------------------ */
/*  Filtres et pagination                                              */
/* ------------------------------------------------------------------ */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: flex-end;
  padding: 0.8em;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  margin-bottom: 1em;
}
.filtre-champ { display: flex; flex-direction: column; min-width: 8em; flex: 1 1 8em; }
.filtre-champ label { margin: 0 0 0.2em; font-size: 0.8em; }
.filtre-actions { display: flex; gap: 0.4em; align-items: flex-end; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px solid var(--bordure);
  font-size: 0.9em;
}
.pagination-compte { color: var(--texte-att); }
.pagination-boutons { display: flex; align-items: center; gap: 0.3em; }
.pagination-boutons button { padding: 0.3em 0.7em; }
.pagination-taille { display: flex; align-items: center; gap: 0.4em; margin: 0; font-size: 0.9em; }
.pagination-taille select { width: auto; padding: 0.25em 0.4em; }

th.triable { cursor: pointer; user-select: none; }
th.triable:hover { color: var(--or); }

.cases-liste { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
.case-liste {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  font-weight: normal;
  font-size: 0.92em;
  color: var(--texte);
  white-space: nowrap;
}

.bouton-lien {
  display: inline-block;
  border: 1px solid var(--or);
  background: var(--surface);
  color: var(--or);
  border-radius: var(--radius);
  padding: 0.5em 1em;
  text-decoration: none;
  font-size: 0.95em;
}
.bouton-lien:hover { background: var(--fond); }

.pied { text-align: center; color: var(--texte-att); font-size: 0.8em; padding: 1em; }

/* ------------------------------------------------------------------ */
/*  Impression                                                         */
/*                                                                     */
/*  Le navigateur imprime toute la page. `data-impression` sur <body>  */
/*  designe le seul document a sortir : sans lui, l'en-tete de          */
/*  navigation partirait sur le papier thermique.                       */
/* ------------------------------------------------------------------ */

/* A l'ecran, le recu s'affiche comme un apercu encadre. */
.recu { border: 1px solid var(--bordure); border-radius: var(--radius); }

@media print {
  .entete, .no-print, .pied { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .carte { border: none; margin: 0; padding: 0; }

  /* Le recu perd son cadre d'apercu des qu'il part sur le papier. */
  .recu { border: none; }

  /* --- FACTURE SEULE : le recu est masque --- */
  body[data-impression="facture"] .recu { display: none !important; }

  /* --- RECU SEUL : la facture est masquee, et le papier prend
         exactement la largeur reglee dans l'Administration. --- */
  body[data-impression="recu"] .doc-facture { display: none !important; }
  body[data-impression="recu"] .recu { margin: 0; width: auto; }
  body[data-impression="recu"] { margin: 0; }

  /* --- FACTURE + RECU : les deux sortent, sur des pages distinctes.
         Sans ce saut, le recu s'imprimerait dans le bas de la facture. --- */
  body[data-impression="tout"] .recu {
    break-before: page;
    page-break-before: always;
    margin: 0;
  }
}