:root {
  --vert: #0A6B3D; --vert-fonce: #08522F; --vert-clair: #E8F3EC; --vert-txt: #D5EBDD;
  --jaune: #FFC93C; --encre: #111111; --gris: #5E5E5E; --ligne: #E4E4E4; --fond: #FFFFFF; --fond2: #F4F4F2;
  --rouge: #C62828; --rouge-fonce: #8E1B1B; --rouge-clair: #FDECEA; --orange-clair: #FFF6DB;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--encre); background: var(--fond2); font-size: 15px; -webkit-text-size-adjust: 100%; }
a { color: var(--vert); }
.mono, .num { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--fond); display: flex; flex-direction: column; padding-bottom: 72px; }
.app.large { max-width: 980px; }

/* Barre du haut */
.top { background: var(--vert); color: #fff; padding: 0 16px; }
.top-row { height: 58px; display: flex; align-items: center; gap: 8px; }
.top-row h1 { font-size: 18px; font-weight: 600; margin: 0; flex: 1; }
.top-row a, .top-row button { color: #fff; }
.top .back { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; margin-left: -10px; text-decoration: none; font-size: 22px; }
.top .sub { color: var(--vert-txt); font-size: 13px; }
.hero { padding: 0 0 18px; }
.hero .big { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; font-size: 40px; letter-spacing: -1px; line-height: 1.1; }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding-bottom: 16px; }
.hero-grid .v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 700; font-size: 22px; }

/* Navigation du bas */
.nav { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; background: #fff; border-top: 1px solid #DADADA; display: flex; z-index: 10; }
.nav-in { max-width: 560px; margin: 0 auto; display: flex; width: 100%; }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--gris); font-size: 12px; }
.nav a.on { color: var(--vert); font-weight: 600; box-shadow: inset 0 3px 0 var(--vert); }
.nav svg { width: 22px; height: 22px; }

/* Blocs */
.section-t { padding: 18px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--gris); text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; }
.section-t a { text-transform: none; letter-spacing: 0; font-size: 13px; }
.pad { padding: 16px; }
.rows { border-top: 1px solid var(--ligne); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ligne); text-decoration: none; color: inherit; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 15px; font-weight: 600; }
.row .s { font-size: 13px; color: var(--gris); }
.row .r { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.dot.on { background: #1E8E4E; } .dot.off { background: var(--rouge); } .dot.wait { background: #B7791F; }
.swatch { width: 12px; height: 12px; flex: none; display: inline-block; }
.empty { padding: 24px 16px; color: var(--gris); text-align: center; }

.alert { display: flex; gap: 10px; align-items: center; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--ligne); }
.alert.err { background: var(--rouge-clair); color: var(--rouge-fonce); }
.alert.warn { background: var(--orange-clair); color: #6B4E00; }
.alert.ok { background: var(--vert-clair); color: #14532D; }

/* Boutons et formulaires */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 6px; border: 1px solid #9E9E9E; background: #fff; color: var(--encre); font: 600 15px inherit; font-family: inherit; text-decoration: none; cursor: pointer; }
.btn.main { background: var(--jaune); border-color: var(--jaune); height: 56px; font-size: 17px; font-weight: 700; letter-spacing: .5px; width: 100%; }
.btn.green { background: #1E8E4E; border-color: #1E8E4E; color: #fff; }
.btn.dark { background: var(--encre); border-color: var(--encre); color: #fff; }
.btn.red { color: var(--rouge-fonce); border-color: var(--rouge-fonce); background: #fff; }
.btn.small { height: 38px; padding: 0 12px; font-size: 14px; }
.btn.block { width: 100%; }
.btns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
form.stack { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
input, select, textarea { height: 48px; border: 1px solid #BDBDBD; border-radius: 4px; padding: 0 12px; font: 400 16px inherit; font-family: inherit; color: var(--encre); background: #fff; width: 100%; }
textarea { height: auto; padding: 10px 12px; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vert); outline-offset: 0; }
.hint { font-size: 13px; color: var(--gris); font-weight: 400; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

/* Choix de forfait */
.choices { border-top: 1px solid var(--ligne); }
.choice { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 54px; border-bottom: 1px solid var(--ligne); font-size: 16px; cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--vert); margin: 0; flex: none; }
.choice:has(input:checked) { background: var(--vert-clair); font-weight: 600; }
.choice .grow { flex: 1; }

/* Onglets de periode */
.chips { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; }
.chip { flex: none; padding: 8px 12px; border-radius: 999px; border: 1px solid #BDBDBD; color: var(--encre); text-decoration: none; font-size: 14px; }
.chip.on { background: var(--vert); border-color: var(--vert); color: #fff; }

/* Tableaux */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; color: var(--gris); font-weight: 600; padding: 8px 16px; border-bottom: 1px solid var(--ligne); }
.tbl td { padding: 10px 16px; border-bottom: 1px solid var(--ligne); }
.tbl .n { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; }
.scroll { overflow-x: auto; }

/* Recu */
.receipt-wrap { background: #EDEDEA; padding: 20px; }
.receipt { background: #fff; padding: 20px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.receipt .c { text-align: center; }
.receipt .cut { border-top: 1.5px dashed #9E9E9E; margin: 8px 0; }
.receipt .code { font-size: 38px; font-weight: 700; letter-spacing: 6px; text-align: center; }
.receipt .l { display: flex; justify-content: space-between; }
.receipt .l span:first-child { color: var(--gris); }

/* Code a copier */
pre.code { background: var(--encre); color: #E8F3EC; padding: 12px; border-radius: 4px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 0; }
.box { border: 1px solid var(--ligne); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fond2); color: var(--gris); white-space: nowrap; }
.badge.ok { background: var(--vert-clair); color: #14532D; } .badge.err { background: var(--rouge-clair); color: var(--rouge-fonce); } .badge.warn { background: var(--orange-clair); color: #6B4E00; }

/* Connexion */
.login { max-width: 420px; margin: 0 auto; padding: 48px 16px; }
.login .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 24px; color: var(--vert); margin-bottom: 24px; }

/* ---------- Ordinateur : menu sur le cote, pleine largeur ---------- */
.nav-brand { display: none; }
.cols > div { min-width: 0; }
@media (min-width: 900px) {
  body.has-nav .app { max-width: none; margin: 0 0 0 232px; padding-bottom: 0; }
  body.has-nav .nav { top: 0; bottom: 0; left: 0; right: auto; width: 232px; height: auto; border-top: 0; border-right: 1px solid #DADADA; }
  body.has-nav .nav-in { flex-direction: column; max-width: none; margin: 0; }
  .nav-brand { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px; font-weight: 700; font-size: 17px; color: #fff; background: var(--vert); }
  body.has-nav .nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 20px; font-size: 15px; }
  body.has-nav .nav a.on { box-shadow: inset 4px 0 0 var(--vert); background: var(--vert-clair); }
  body.has-nav main { max-width: 1080px; }
  body.has-nav .top-row, body.has-nav .hero, body.has-nav .hero-grid { max-width: 1048px; }
  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-right: 16px; }
  body.has-nav form.stack, body.has-nav .pad { max-width: 640px; }
  body.has-nav .alert { max-width: none; }
}

/* Impression des tickets */
.sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
.tk { border: 1px dashed #777; padding: 10px 8px; text-align: center; break-inside: avoid; border-left: 7px solid var(--c, #0A6B3D); display: flex; flex-direction: column; gap: 3px; }
.tk .z { font-size: 12px; }
.tk .z b { font-size: 13px; letter-spacing: .5px; }
.tk .cd { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 28px; font-weight: 700; letter-spacing: 3px; line-height: 1.1; margin: 2px 0; }
.tk .p { font-size: 13px; font-weight: 600; }
.tk .aide { font-size: 10.5px; color: #333; line-height: 1.3; }
@media print {
  .noprint, .nav, .top { display: none !important; }
  body, .app { background: #fff; padding: 0; max-width: none; }
  .sheet { grid-template-columns: repeat(3, 1fr); }
  body.has-nav .app { margin: 0; }
}
@media (min-width: 700px) { .sheet { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .sheet { grid-template-columns: repeat(4, 1fr); } }

/* Cases du tableau de bord du credit */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 16px; }
.tile { border: 1px solid var(--ligne); border-left: 5px solid var(--vert); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.tile .tl { font-size: 13px; color: var(--gris); font-weight: 600; }
.tile .tv { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 26px; font-weight: 700; }
.tile .ts { font-size: 12.5px; color: var(--gris); flex: 1; }
.tile .btn { align-self: flex-start; }