@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
  font-size: 18px;
  --green: #194739;
  --ink: #172e28;
  --muted: #57665f;
  --line: #dce3dd;
  --canvas: #f5f7f4;
  --accent: #d9ef85;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.5;
}
h1,
h2,
h3,
.brand {
  font-family: Manrope, Arial, sans-serif;
}
h1 {
  font-size: 2.1rem;
  line-height: 1.25;
  letter-spacing: -1px;
  margin: 10px 0;
}
h2 {
  font-size: 1.3rem;
  margin: 0 0 14px;
}
h3 {
  font-size: 1.12rem;
  margin: 0;
}
p {
  margin: 8px 0 20px;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 12px 20px;
  min-height: 50px;
  color: var(--ink);
  font-weight: 600;
}
button:hover {
  background: #eaf0e9;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #9d6500;
  outline-offset: 4px;
}
.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.primary:hover {
  background: #10382b;
}
.secondary {
  background: var(--accent);
  border-color: var(--accent);
}
.quiet {
  border: 0;
  background: transparent;
  padding: 8px;
  font-size: 0.88rem;
}
.link {
  padding: 0;
  border: 0;
  min-height: 44px;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.demo {
  background: #e5ecd9;
  color: #34482b;
  text-align: center;
  padding: 8px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.demo span {
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 16px;
}
header {
  height: 100px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 800;
}
.mark {
  background: var(--green);
  color: var(--accent);
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
}
.brand small {
  display: block;
  font-size: 0.76rem;
  font-family: "DM Sans", Arial;
  font-weight: 400;
  color: var(--muted);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.company-link {
  font-size: 0.87rem;
  font-weight: 600;
}
.avatar {
  background: #e9eddf;
  border-radius: 50%;
  height: 42px;
  width: 42px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - 137px);
}
aside {
  border-right: 1px solid var(--line);
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
nav {
  display: grid;
  gap: 10px;
}
nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 10px;
  font-size: 1.15rem;
}
nav a span {
  font-size: 0.94rem;
  font-weight: 500;
}
nav a.active {
  background: #eaf1e7;
  color: var(--green);
}
.side-help {
  margin: 65px 10px 25px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}
.help-icon {
  display: grid;
  place-items: center;
  border: 1px solid #a0aca1;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
}
.side-help strong {
  display: block;
}
.side-help p {
  color: var(--muted);
}
.side-foot {
  margin: auto 12px 0;
  font-size: 0.77rem;
}
.side-foot span {
  color: var(--muted);
}
main {
  padding: 42px 50px 60px;
  max-width: 1450px;
  width: 100%;
}
.eyebrow {
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--muted);
  font-weight: 700;
}
.muted {
  color: var(--muted);
}
.intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.intro p {
  color: var(--muted);
  margin: 12px 0 0;
}
.date {
  font-size: 0.85rem;
  white-space: nowrap;
}
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.action-card {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 28px;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  min-height: 155px;
}
.action-card.main {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.action-card.main:hover {
  background: #10382b;
}
.action-card strong {
  display: block;
  font-size: 1.35rem;
  font-family: Manrope, Arial;
}
.action-card small {
  display: block;
  font-size: 0.87rem;
  font-weight: 400;
  margin-top: 6px;
  color: var(--muted);
}
.action-card.main small {
  color: #d1e2d6;
}
.action-icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 62px;
  border: 1px solid #c4d3c9;
  border-radius: 10px;
  font-size: 1.9rem;
  flex: none;
}
.main .action-icon {
  color: var(--accent);
  border-color: #638171;
}
.arrow {
  margin-left: auto;
  font-size: 1.5rem;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 26px 0 34px;
}
.stat {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
}
.stat span {
  font-size: 0.86rem;
  color: var(--muted);
}
.stat strong {
  display: block;
  font-size: 1.7rem;
  letter-spacing: -0.6px;
  margin: 6px 0;
}
.stat small {
  font-size: 0.77rem;
  color: var(--muted);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.section-head h2 {
  margin: 0;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  padding: 26px;
}
.doc-row {
  display: grid;
  grid-template-columns: 1.4fr 1.25fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.doc-row:last-child {
  border: 0;
}
.doc-row strong {
  display: block;
}
.doc-row small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 3px;
}
.badge {
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.77rem;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
}
.pending {
  background: #fff1d5;
  color: #815b0b;
}
.paid {
  background: #e6f1e7;
  color: #28583a;
}
.quote {
  background: #eaf0f8;
  color: #3c5578;
}
.amount {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.bottom-note {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.81rem;
}
.bottom-note b {
  color: var(--green);
}
.steps {
  display: flex;
  gap: 10px;
  margin: 25px 0;
}
.step {
  flex: 1;
  padding: 12px 10px;
  border-bottom: 3px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}
.step.active {
  border-color: var(--green);
  color: var(--green);
  font-weight: 700;
}
.step b {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: #e9eee8;
  margin-right: 6px;
}
.step.active b {
  background: var(--green);
  color: white;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.95rem;
}
.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-weight: 400;
}
input,
select,
textarea {
  padding: 13px 15px;
  border: 1px solid #a6b2a8;
  border-radius: 8px;
  background: white;
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
}
textarea {
  min-height: 95px;
  resize: vertical;
}
.form-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 26px;
}
.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.client-card {
  display: block;
  text-align: left;
  padding: 22px;
}
.client-card.selected {
  outline: 3px solid var(--green);
  background: #edf4e7;
}
.client-card small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 8px;
}
.catalog {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.catalog button {
  font-size: 0.87rem;
}
.line-item {
  display: grid;
  grid-template-columns: 2fr 0.6fr 0.9fr 0.75fr auto;
  gap: 12px;
  align-items: end;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.line-item label {
  font-size: 0.78rem;
}
.line-item input,
.line-item select {
  width: 100%;
  margin-top: 5px;
  padding: 10px;
}
.line-item button {
  padding: 10px;
}
.total {
  margin: 25px 0 0 auto;
  max-width: 350px;
}
.total div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}
.total .grand {
  font-size: 1.35rem;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  font-weight: 700;
}
.notice {
  background: #f0f4eb;
  border-left: 3px solid #789350;
  padding: 14px 18px;
  font-size: 0.86rem;
  margin: 20px 0;
}
.document {
  max-width: 800px;
  margin: auto;
  padding: 45px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.document-top {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}
.document h2 {
  font-size: 1.9rem;
}
.document p {
  white-space: pre-line;
}
.document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 25px;
}
.document th,
.document td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.document th:first-child,
.document td:first-child {
  text-align: left;
}
.document th {
  background: #edf2eb;
}
.document .demo-stamp {
  font-weight: 700;
  color: #805b1f;
  margin: 25px 0 0;
  border: 1px dashed #ad9061;
  padding: 12px;
  text-align: center;
}
.filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-row button.active {
  background: var(--green);
  color: white;
}
.empty {
  text-align: center;
  padding: 50px;
}
.error {
  color: #a52b20;
  font-weight: 600;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 10px;
  top: 10px;
  background: white;
  padding: 20px;
  z-index: 10;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: white;
  border-radius: 10px;
  padding: 16px 24px;
  z-index: 20;
  display: none;
  box-shadow: 0 4px 25px #0002;
  max-width: 90vw;
}
dialog {
  max-width: 650px;
  border: 0;
  border-radius: 18px;
  padding: 35px;
  box-shadow: 0 20px 90px #0003;
}
dialog::backdrop {
  background: #12332880;
}
@media (min-width: 1550px) {
  main {
    padding: 50px 65px;
  }
}
@media (max-width: 1100px) {
  header {
    padding: 0 24px;
  }
  .layout {
    grid-template-columns: 205px 1fr;
  }
  aside {
    padding: 22px 10px;
  }
  main {
    padding: 30px 25px;
  }
  .action-card {
    padding: 22px;
    gap: 12px;
  }
  .action-card strong {
    font-size: 1.12rem;
  }
  .date {
    display: none;
  }
  .stats {
    gap: 12px;
  }
  .stat {
    padding: 18px;
  }
  .doc-row {
    grid-template-columns: 1.3fr 1fr auto;
  }
  .doc-row .doc-status {
    grid-column: 2;
    grid-row: auto;
  }
  .doc-row .amount {
    grid-column: 3;
    grid-row: auto;
  }
  .doc-row > button {
    grid-column: 3;
  }
  .line-item {
    grid-template-columns: 1fr 1fr;
  }
  .line-item > label:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 760px) {
  :root {
    font-size: 17px;
  }
  header {
    height: 85px;
    padding: 0 18px;
  }
  .header-actions {
    gap: 8px;
  }
  .header-actions .avatar,
  .quiet span {
    display: none;
  }
  .company-link {
    font-size: 0.76rem;
  }
  .brand {
    font-size: 1.05rem;
  }
  .mark {
    width: 40px;
    height: 40px;
  }
  .demo {
    font-size: 0.7rem;
  }
  .demo span {
    display: block;
    margin: 3px 0 0;
  }
  .layout {
    display: block;
  }
  aside {
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  nav a {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 3px;
  }
  nav a span {
    font-size: 0.7rem;
    text-align: center;
  }
  .side-help,
  .side-foot {
    display: none;
  }
  main {
    padding: 27px 18px;
  }
  .actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .action-card {
    min-height: 120px;
  }
  .stats {
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 20px 0 27px;
  }
  .stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .stat strong {
    font-size: 1.3rem;
    margin: 0;
  }
  .stat small {
    display: none;
  }
  h1 {
    font-size: 1.7rem;
  }
  .panel {
    padding: 19px;
  }
  .doc-row {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .doc-row .doc-status {
    grid-column: 1;
  }
  .doc-row .amount {
    grid-column: 2;
    grid-row: 1;
  }
  .doc-row > button {
    grid-column: 2;
  }
  .form-grid,
  .client-grid {
    grid-template-columns: 1fr;
  }
  .step {
    font-size: 0.73rem;
    padding: 10px 2px;
  }
  .step b {
    display: block;
    margin-bottom: 6px;
  }
  .section-head {
    align-items: flex-start;
  }
  .section-head .link {
    font-size: 0.8rem;
  }
  .document {
    padding: 20px;
  }
  .document-top {
    flex-direction: column;
  }
  .document table {
    font-size: 0.75rem;
  }
  .document td,
  .document th {
    padding: 8px 3px;
  }
  .form-footer {
    flex-wrap: wrap;
  }
  .intro {
    align-items: flex-start;
  }
  .intro > button {
    font-size: 0.8rem;
  }
}
@media print {
  body {
    background: white;
  }
  header,
  aside,
  .demo,
  .no-print,
  #toast,
  .skip {
    display: none !important;
  }
  .layout {
    display: block;
  }
  main {
    padding: 0;
    max-width: none;
  }
  .document {
    border: 0;
    padding: 0;
    max-width: none;
  }
  .document-top {
    flex-direction: row;
  }
  button {
    display: none;
  }
  @page {
    margin: 18mm;
  }
}

.auth-panel {
  max-width: 560px;
  margin: 2rem auto;
}
.auth-panel .field {
  margin-bottom: 1.25rem;
}
.auth-panel #authmessage {
  min-height: 1.5em;
}
.client-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.review-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 1.5rem;
}

/* Facture Facile — identité artisanale, vert forêt et terracotta */
:root {
  --green: #173d32;
  --green-dark: #102f27;
  --ink: #20362f;
  --muted: #64716a;
  --line: #dfe6df;
  --canvas: #faf9f5;
  --accent: #be5739;
  --warm-white: #fffdfa;
  --focus: #bc5a30;
}
body {
  background: var(--canvas);
}
h1,
h2,
h3,
.brand {
  font-family: Georgia, "Times New Roman", serif;
}
h1 {
  font-size: clamp(2.5rem, 4.3vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
h2 {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
}
button {
  border-radius: 9px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
}
.primary {
  background: var(--accent);
  border-color: var(--accent);
}
.primary:hover {
  background: #a6442a;
}
.demo {
  background: #ecf1e8;
  color: #395247;
}
header {
  height: 86px;
  padding: 0 36px;
  background: var(--warm-white);
}
.brand {
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}
.brand small {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0;
}
.mark {
  background: var(--green);
  color: #f2b798;
  border-radius: 10px;
}
.company-link {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
.avatar {
  background: #e9e7de;
  color: var(--green);
}
.layout {
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
}
aside {
  background: linear-gradient(170deg, #173d32 0%, #102d25 100%);
  color: #f4f3e9;
  border: 0;
  padding: 30px 16px 26px;
}
nav {
  gap: 6px;
}
nav a {
  border-radius: 9px;
  padding: 14px 17px;
  font-size: 1.1rem;
}
nav a span {
  font-size: 0.93rem;
}
nav a:hover,
nav a.active {
  background: #ffffff20;
  color: white;
}
nav a.active span {
  font-weight: 700;
}
.side-help {
  border-top: 1px solid #ffffff40;
  margin: 42px 14px 24px;
  color: #e7eee5;
}
.side-help p {
  color: #c9d8cf;
}
.side-help button {
  color: white;
}
.help-icon {
  border-color: #a5bfb1;
}
.side-foot {
  margin: auto 14px 0;
  display: grid;
  gap: 10px;
  color: #f6f3e9;
}
.side-foot strong {
  display: block;
  max-width: 185px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 400;
}
.side-foot span:last-child {
  color: #b8cec0;
  line-height: 1.55;
}
.side-foot-symbol {
  font-size: 4rem;
  line-height: 0.8;
  color: #db9475;
  font-family: Georgia, serif;
}
main {
  max-width: 1600px;
  padding: 42px clamp(25px, 4vw, 66px) 70px;
}
.eyebrow {
  color: #9b5c43;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}
.intro {
  margin-bottom: 34px;
}
.intro h1 {
  font-size: clamp(2.1rem, 3.1vw, 3.4rem);
}
.intro p {
  max-width: 660px;
}
.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 176px;
  gap: 26px;
  margin-bottom: 26px;
}
.home-hero h1 {
  margin: 7px 0 5px;
  color: var(--green-dark);
}
.home-hero p {
  margin: 0;
  color: #7a756e;
  font-size: 1.25rem;
  font-weight: 600;
}
.terracotta {
  color: var(--accent);
}
.hero-art {
  width: min(33%, 340px);
  min-width: 190px;
  color: #96a999;
  text-align: center;
  align-self: stretch;
  display: grid;
  align-content: center;
}
.hero-art span {
  display: block;
  color: #a2674f;
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: 0.03em;
}
.hero-art svg {
  width: 100%;
  max-height: 126px;
}
.actions {
  max-width: 850px;
  gap: 16px;
}
.action-card {
  min-height: 92px;
  padding: 16px 20px;
  border-radius: 9px;
  border-color: #9caf9e;
  background: transparent;
}
.action-card:hover {
  border-color: var(--green);
  background: #f2f5ef;
}
.action-card.main {
  background: var(--accent);
  border-color: var(--accent);
}
.action-card.main:hover {
  background: #a6442a;
}
.action-card strong {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.action-card small {
  font-size: 0.76rem;
  margin-top: 2px;
}
.action-card.main small {
  color: #fff3ed;
}
.action-icon {
  border: 0;
  font-size: 1.7rem;
  width: 36px;
  height: 45px;
}
.action-card.main .action-icon {
  border: 0;
  color: white;
}
.arrow {
  font-size: 1.6rem;
}
.stats {
  margin: 32px 0 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.stat {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 15px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 400;
  box-shadow: 0 4px 18px #2c403006;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #183d3219;
}
.stat-unpaid {
  background: #fcf0ea;
}
.stat-paid {
  background: #ecf4ed;
}
.stat-quotes {
  background: #f8f2e9;
}
.stat-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 50px;
  font-size: 1.75rem;
  color: var(--accent);
}
.stat-paid .stat-icon {
  color: var(--green);
}
.stat-content {
  display: grid;
  min-width: 0;
}
.stat-content > span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}
.stat strong {
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2.1vw, 2.1rem);
  color: var(--accent);
  letter-spacing: -0.035em;
  margin: 3px 0;
  white-space: nowrap;
}
.stat-paid strong {
  color: var(--green);
}
.stat small {
  font-size: 0.73rem;
}
.stat-arrow {
  margin-left: auto;
  color: var(--accent);
  font-size: 1.7rem;
}
.stat-paid .stat-arrow {
  color: var(--green);
}
.recent-panel .section-head {
  background: white;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px 6px;
  margin: 0;
}
.recent-panel .section-head h2 {
  font-size: 1.45rem;
}
.recent-panel .section-head .link {
  color: #a34e34;
  font-size: 0.81rem;
}
.recent-panel .panel {
  padding-top: 5px;
  border-radius: 0 0 12px 12px;
  border-top: 0;
}
.panel {
  box-shadow: 0 3px 20px #243b2d08;
  border-color: var(--line);
}
.doc-row {
  grid-template-columns: minmax(0, 1.5fr) 1fr minmax(125px, 0.7fr) auto;
  gap: 18px;
  padding: 15px 0;
}
.doc-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.doc-identity > div {
  min-width: 0;
}
.doc-identity strong,
.doc-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-type-icon {
  width: 36px;
  height: 38px;
  background: #eff3ed;
  border-radius: 8px;
  color: var(--green);
  display: grid;
  place-items: center;
  flex: none;
}
.doc-row small:last-child {
  color: #7d887e;
}
.badge {
  border-radius: 20px;
  padding: 6px 11px;
}
.pending {
  background: #fceada;
  color: #904d25;
}
.paid {
  background: #e6f1e5;
  color: #28583a;
}
.quote {
  background: #edf0e5;
  color: #536247;
}
.row-open {
  min-height: 40px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--green);
}
.row-open:hover {
  background: #eef4ec;
}
.steps .step.active {
  border-color: var(--accent);
  color: var(--green);
}
.step.active b,
.filter-row button.active {
  background: var(--green);
}
.client-card.selected {
  outline-color: var(--accent);
  background: #fcf5ec;
}
.notice {
  border-left-color: var(--accent);
  background: #faf2ed;
}
.document {
  box-shadow: 0 8px 30px #2a392c10;
}
.document th {
  background: #edf3ee;
}
.review-actions button:first-child {
  border-color: var(--accent);
  color: #95472d;
}
#toast {
  background: var(--green);
}
@media (max-width: 1150px) {
  .layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  main {
    padding: 32px 26px 55px;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    gap: 7px;
    padding: 15px 11px;
  }
  .stat strong {
    font-size: 1.45rem;
  }
  .stat-arrow {
    display: none;
  }
}
@media (max-width: 760px) {
  header {
    height: 78px;
    padding: 0 15px;
  }
  .layout {
    display: block;
  }
  aside {
    padding: 7px;
  }
  nav a {
    color: white;
    padding: 10px 3px;
  }
  nav a.active {
    background: #ffffff25;
  }
  main {
    padding: 24px 16px 50px;
  }
  .home-hero {
    min-height: 0;
    margin-bottom: 26px;
  }
  .home-hero h1 {
    font-size: 2.8rem;
  }
  .home-hero p {
    font-size: 1rem;
  }
  .hero-art {
    display: none;
  }
  .actions,
  .stats {
    grid-template-columns: 1fr;
  }
  .action-card {
    min-height: 82px;
  }
  .stat {
    min-height: 105px;
    padding: 17px;
  }
  .stat strong {
    font-size: 1.7rem;
  }
  .doc-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .doc-row .doc-status {
    grid-column: 1;
  }
  .doc-row .amount {
    grid-column: 2;
    grid-row: 1;
  }
  .doc-row > button {
    grid-column: 2;
  }
  .recent-panel .section-head {
    padding: 18px 16px 5px;
  }
  .recent-panel .section-head h2 {
    font-size: 1.2rem;
  }
  .recent-panel .panel {
    padding: 4px 16px 16px;
  }
}
@media print {
  .hero-art,
  .home-hero,
  .stats,
  .actions,
  .recent-panel {
    display: none !important;
  }
  .document {
    box-shadow: none;
  }
}

/* Accueil calqué sur la maquette choisie */
:root {
  --canvas: #fffdfa;
  --green: #123b2f;
  --green-dark: #12382d;
  --accent: #bd5537;
}
body {
  background: var(--canvas);
  font-family: "DM Sans", Arial, sans-serif;
}
h1,
h2,
h3,
.brand-words {
  font-family: "Fraunces", Georgia, serif;
}
.layout {
  grid-template-columns: 284px minmax(0, 1fr);
  min-height: 100vh;
}
.workspace {
  min-width: 0;
  background: radial-gradient(
    ellipse at 47% 13%,
    #fffdfa 0%,
    #fffaf4 75%,
    #fffdfa 100%
  );
}
aside {
  padding: 28px 15px 22px;
  background: linear-gradient(155deg, #173c30 0%, #102f25 100%);
  min-height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 20px;
  color: #fffdfa;
  font-size: inherit;
}
.brand-symbol {
  display: block;
  width: 80px;
  height: 80px;
  color: #e58b67;
  flex: none;
}
.brand-symbol svg {
  width: 100%;
  height: 100%;
}
.brand-words {
  font-size: 1.8rem;
  font-weight: 650;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.brand-tagline {
  margin: 5px 23px 40px;
  color: #c8d4cb;
  font-size: 0.8rem;
  line-height: 1.25;
}
aside nav {
  gap: 4px;
}
aside nav a {
  gap: 16px;
  min-height: 51px;
  font-size: 1rem;
  color: #f8f9f4;
}
aside nav a span:last-child {
  font-size: 0.96rem;
}
aside nav a.active,
aside nav a:hover {
  background: #ffffff2a;
}
.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 25px;
  font-family: Georgia, serif;
  font-size: 1.45rem;
  line-height: 1;
  flex: none;
}
.side-help {
  margin-top: 44px;
  border-color: #d2e5d260;
}
.side-foot {
  margin: auto 21px 2px;
  gap: 9px;
}
.side-foot strong {
  max-width: none;
  font:
    500 1.55rem/0.95 "Caveat",
    cursive;
  transform: rotate(-6deg);
  margin: 14px 0 5px;
}
.side-foot-rule {
  display: block;
  height: 2px;
  width: 86px;
  background: #e69269;
  transform: rotate(-8deg);
  margin: 0 0 26px 55px;
}
.side-foot-symbol {
  display: block;
  font:
    400 5.3rem/1 Georgia,
    serif;
  color: #89a391;
  opacity: 0.55;
  margin-bottom: 2px;
}
.side-foot span:last-child {
  font-size: 0.78rem;
  line-height: 1.55;
}
header {
  height: 78px;
  background: transparent;
  border: 0;
  padding: 0 clamp(28px, 3vw, 55px);
}
.header-date {
  text-transform: capitalize;
  color: #4d554f;
  font-size: 0.79rem;
}
.header-actions {
  gap: 14px;
}
.header-actions .quiet {
  font-size: 0.73rem;
}
.header-actions .avatar {
  width: 38px;
  height: 38px;
  font-size: 0.73rem;
}
.account-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink);
}
.company-link {
  font-size: 0.78rem;
}
main {
  max-width: 1640px;
  padding: 0 clamp(28px, 3vw, 55px) 60px;
}
.home-hero {
  min-height: 175px;
  height: 175px;
  margin: 0 0 24px;
  position: relative;
  overflow: visible;
}
.hero-copy {
  align-self: flex-start;
  position: relative;
  z-index: 1;
  padding-top: 12px;
}
.home-hero h1 {
  font-size: clamp(3.25rem, 4.6vw, 4.65rem);
  letter-spacing: -0.055em;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}
.home-hero p {
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.35;
  color: #807d77;
  margin: 4px 0 0;
}
.hero-underline {
  display: block;
  width: 92px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  transform: rotate(-4deg);
  margin-top: 15px;
}
.hero-art {
  position: relative;
  width: 39%;
  max-width: 500px;
  height: 290px;
  align-self: flex-start;
  margin-top: -8px;
  min-width: 0;
  display: block;
  color: var(--green);
  pointer-events: none;
}
.hero-art img {
  position: absolute;
  right: -15px;
  top: 35px;
  width: 100%;
  height: 248px;
  object-fit: contain;
  object-position: right center;
}
.hero-handwriting {
  position: absolute;
  left: 0;
  top: 0;
  font:
    500 clamp(1.05rem, 1.5vw, 1.45rem)/0.9 "Caveat",
    cursive;
  color: #4b4b43;
  transform: rotate(-8deg);
  text-align: center;
  z-index: 1;
}
.hero-signature {
  position: absolute;
  right: 0;
  top: 240px;
  font:
    500 1.05rem/0.9 "Caveat",
    cursive;
  color: #54524b;
  transform: rotate(-9deg);
  text-align: center;
  z-index: 1;
}
.actions {
  position: relative;
  z-index: 2;
  max-width: 680px;
  gap: 20px;
}
.action-card {
  min-height: 74px;
  height: 74px;
  padding: 12px 22px;
  border-radius: 7px;
  background: #fffefa;
  border-color: #416a5c;
}
.action-card strong {
  font-size: 1.05rem;
}
.action-card .action-icon {
  width: 34px;
  height: 42px;
  color: var(--green);
}
.action-card .arrow {
  font-size: 1.5rem;
}
.stats {
  margin: 38px 0 26px;
  gap: 20px;
}
.stat {
  min-height: 153px;
  padding: 18px 23px;
  border-radius: 12px;
  gap: 20px;
  box-shadow: none;
}
.stat-unpaid {
  background: #fbf0ea;
}
.stat-paid {
  background: #f0f7ef;
}
.stat-quotes {
  background: #fbf4ea;
}
.stat-icon {
  font-size: 2.25rem;
  width: 44px;
}
.stat-content > span {
  font-size: 0.9rem;
}
.stat strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  letter-spacing: -0.03em;
}
.stat small {
  font-size: 0.75rem;
}
.recent-panel {
  padding: 22px 24px 25px;
  background: white;
  border: 1px solid #edeae4;
  box-shadow: 0 9px 30px #4233280c;
  border-radius: 12px;
}
.recent-panel .section-head {
  padding: 0 3px 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.recent-panel .section-head h2 {
  font-size: 1.45rem;
}
.recent-panel .section-head a {
  color: #8b351e;
}
.home-table-scroll {
  overflow-x: auto;
}
.home-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.home-table th {
  padding: 11px 10px;
  text-align: left;
  font-weight: 600;
  color: #35453d;
  background: #f7f8f5;
}
.home-table td {
  padding: 10px;
  border-bottom: 1px solid #e8ece8;
  color: #29382f;
  white-space: nowrap;
}
.home-table tr:last-child td {
  border: 0;
}
.home-table th:nth-child(4),
.home-table td:nth-child(4) {
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}
.home-table th:nth-child(5),
.home-table td:nth-child(5) {
  text-align: right;
}
.home-table td:last-child {
  text-align: right;
}
.table-open {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  letter-spacing: 2px;
}
.table-open:hover {
  background: #f1f4ee;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.recent-panel .badge {
  font-size: 0.72rem;
}
.bottom-note {
  max-width: 820px;
}
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 225px minmax(0, 1fr);
  }
  .brand {
    padding: 0 7px;
    gap: 8px;
  }
  .brand-symbol {
    width: 62px;
    height: 62px;
  }
  .brand-words {
    font-size: 1.5rem;
  }
  .brand-tagline {
    margin: 8px 10px 30px;
  }
  .hero-art {
    width: 35%;
  }
  .hero-handwriting {
    top: 3px;
  }
  .hero-signature {
    display: none;
  }
  .stat {
    gap: 8px;
    padding: 12px;
  }
  .stat strong {
    font-size: 1.45rem;
  }
  .stat-icon {
    width: 32px;
    font-size: 1.65rem;
  }
}
@media (max-width: 900px) {
  .hero-art {
    display: none;
  }
  .home-hero {
    height: auto;
    min-height: 145px;
  }
  .actions {
    max-width: none;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    flex-wrap: wrap;
    min-height: 128px;
  }
  .stat-arrow {
    display: none;
  }
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  aside {
    min-height: 0;
    padding: 8px 10px;
  }
  .brand,
  .brand-tagline,
  .side-help,
  .side-foot {
    display: none;
  }
  nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
  }
  aside nav a {
    min-height: 58px;
    flex-direction: column;
    gap: 2px;
    padding: 5px 1px;
  }
  aside nav a span:last-child {
    font-size: 0.68rem;
  }
  .nav-icon {
    font-size: 1.3rem;
  }
  header {
    height: 62px;
    padding: 0 15px;
  }
  .header-date {
    font-size: 0.69rem;
  }
  .header-actions {
    gap: 6px;
  }
  .account-name,
  .company-link,
  .header-actions .avatar {
    display: none;
  }
  main {
    padding: 17px 15px 45px;
  }
  .home-hero {
    min-height: 130px;
    margin-bottom: 10px;
  }
  .home-hero h1 {
    white-space: normal;
    font-size: clamp(2.3rem, 8vw, 3rem);
  }
  .home-hero p {
    font-size: 1.07rem;
  }
  .actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .action-card {
    height: 64px;
    min-height: 64px;
  }
  .stats {
    grid-template-columns: 1fr;
    margin: 20px 0;
  }
  .stat {
    min-height: 98px;
    flex-wrap: nowrap;
    padding: 13px 20px;
  }
  .stat strong {
    font-size: 1.65rem;
  }
  .recent-panel {
    padding: 17px 13px;
  }
  .recent-panel .section-head h2 {
    font-size: 1.25rem;
  }
  .recent-panel .section-head a {
    font-size: 0.7rem;
  }
}
@media print {
  aside,
  header,
  .home-hero,
  .actions,
  .stats,
  .recent-panel {
    display: none !important;
  }
  .workspace {
    background: white;
  }
}

/* Titre long et légendes indépendantes du dessin */
.account-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 42%);
  align-items: center;
  min-height: 255px;
  height: auto;
  gap: 18px;
  margin-bottom: 18px;
}
.hero-copy {
  min-width: 0;
  padding-top: 0;
  align-self: center;
}
.home-hero h1 {
  white-space: normal;
  overflow-wrap: break-word;
  font-size: clamp(2.55rem, 3.6vw, 4.05rem);
  line-height: 1.06;
}
.hero-art {
  width: 100%;
  max-width: none;
  height: 242px;
  margin: 0;
  display: grid;
  grid-template-columns: 36% 64%;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  overflow: hidden;
}
.hero-art img {
  position: static;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero-art .hero-handwriting,
.hero-art .hero-signature {
  position: static;
  grid-column: 1;
  width: 100%;
  max-width: 100%;
  z-index: 0;
  line-height: 0.95;
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  transform: rotate(-5deg);
  padding: 0 8px;
  overflow-wrap: break-word;
}
.hero-art .hero-handwriting {
  grid-row: 1;
}
.hero-art .hero-signature {
  grid-row: 2;
  display: block;
}
@media (max-width: 1200px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
  }
  .home-hero h1 {
    font-size: clamp(2.3rem, 3.4vw, 3.4rem);
  }
  .hero-art .hero-handwriting,
  .hero-art .hero-signature {
    font-size: 1.15rem;
  }
}
@media (max-width: 900px) {
  .home-hero {
    display: block;
    min-height: 0;
    margin-bottom: 26px;
  }
  .hero-art {
    display: none;
  }
}
@media (max-width: 760px) {
  .home-hero h1 {
    font-size: clamp(2.3rem, 8vw, 3rem);
  }
}
/* Illustration seule, sans phrases manuscrites */
.hero-art {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-art img {
  flex: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}
@media (max-width: 900px) {
  .hero-art {
    display: none;
  }
}

/* Choix du métier : le thème plomberie conserve intégralement ses styles existants. */
#themebutton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  border: 1px solid var(--line);
  padding: 8px 12px;
}
#themebutton[hidden] {
  display: none;
}
.theme-current {
  color: var(--green);
  font-weight: 700;
}
#themedialog {
  width: min(680px, calc(100% - 26px));
  max-height: min(90vh, 850px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  color: var(--ink);
  background: var(--warm-white);
  box-shadow: 0 25px 80px #152a2640;
}
#themedialog::backdrop {
  background: #14221db3;
}
#themedialog h2 {
  margin-bottom: 6px;
}
#themedialog > p {
  color: var(--muted);
  margin-bottom: 22px;
}
.theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.theme-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  min-height: 94px;
  padding: 14px;
  border: 1px solid var(--line);
  background: white;
}
.theme-option:hover {
  background: var(--canvas);
}
.theme-option[aria-pressed="true"] {
  border: 2px solid var(--accent);
  background: var(--canvas);
}
.theme-option > span {
  grid-row: 1 / 3;
  font-size: 1.8rem;
  color: var(--accent);
  text-align: center;
}
.theme-option strong {
  font-size: 0.94rem;
  line-height: 1.2;
}
.theme-option small {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .header-actions {
    gap: 10px;
  }
  #themebutton {
    font-size: 0.76rem;
  }
}
@media (max-width: 760px) {
  .header-actions {
    gap: 5px;
  }
  #themebutton {
    font-size: 0;
    min-height: 40px;
    padding: 5px 7px;
  }
  #themebutton .theme-current {
    font-size: 0.68rem;
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .theme-options {
    grid-template-columns: 1fr;
  }
  #themedialog {
    padding: 20px;
  }
}
@media print {
  #themedialog {
    display: none !important;
  }
}
/* Gestion du catalogue et suivi des factures */
#feature-dialog {
  width: min(850px, 94vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  color: var(--ink);
  background: var(--warm-white);
}
#feature-dialog::backdrop {
  background: #14221d99;
}
#feature-dialog button {
  margin: 6px 6px 6px 0;
}
.catalog-edit {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  margin: 16px 0;
  align-items: end;
}
.catalog-edit input,
.recurrence-box input[type="date"],
.recurrence-box select {
  width: 100%;
}
.catalog-edit label {
  min-width: 0;
}
.recurrence-box,
.logo-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}
.recurrence-box input[type="checkbox"] {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;
}
.recurrence-box .form-grid {
  margin-top: 18px;
}
.recurring-card,
.invoice-extras {
  margin: 20px 0;
}
.company-logo {
  display: block;
  width: auto;
  max-width: 190px;
  height: auto;
  max-height: 95px;
  object-fit: contain;
  margin-bottom: 16px;
}
#logo-preview {
  min-height: 90px;
  padding: 16px;
  border: 1px dashed var(--line);
  background: white;
}
.payment-qr {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
  break-inside: avoid;
}
.payment-qr svg {
  width: 42mm;
  height: 42mm;
  flex: none;
  background: white;
}
.payment-qr p {
  margin: 6px 0;
  font-size: 0.85rem;
}
.reminder-entry {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.reminder-entry pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}
.mail-action {
  display: inline-block;
  padding: 12px;
  margin: 10px 8px 10px 0;
}
@media (max-width: 650px) {
  .catalog-edit {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-edit label:first-child {
    grid-column: 1/-1;
  }
  .payment-qr {
    flex-wrap: wrap;
  }
}
@media print {
  #feature-dialog {
    display: none !important;
  }
  .company-logo {
    max-height: 24mm;
  }
  .payment-qr {
    break-inside: avoid;
  }
}
/* Mise à jour : dix métiers, modèles et totaux compacts */
.total {margin-top:16px; max-width:330px;}
.total > div {padding:0; margin:0 0 5px; gap:20px; line-height:1.3;}
.total > .grand {margin:8px 0 0; padding-top:8px; font-size:1.15rem;}
.document-heading {display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:48px; margin-bottom:12px;}
.document-heading h2 {margin:0 0 0 auto; color:var(--invoice-accent);}
.document-top {align-items:baseline;}
.document-top > div:last-child {text-align:right;}
.document-top strong {display:block; line-height:1.4;}
.document-heading .company-logo {margin:0; max-height:60px; width:auto;}
.document.font-serif {font-family:Georgia,serif;}
.template-moderne {border-top:8px solid var(--invoice-accent);}
.template-moderne th {background:var(--invoice-accent); color:white;}
.template-minimal {border:0; border-radius:0;}
.template-minimal th {background:white; border-bottom:2px solid var(--invoice-accent);}
.template-elegant {border-left:5px solid var(--invoice-accent); font-family:Georgia,serif;}
.template-elegant h2 {letter-spacing:.15em;}
.template-compact {padding:24px; font-size:.88rem;}
.template-compact td,.template-compact th {padding:6px;}
.template-compact p {margin:8px 0;}
.template-compact table {margin-top:12px;}
.wide-dialog {width:min(1250px,96vw); max-width:96vw; max-height:94vh; overflow:auto;}
.template-editor {display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px;}
#template-preview {background:#edf0f2; padding:16px; overflow:auto;}
#template-preview .document {min-width:550px;}
.client-note {white-space:pre-wrap; border-left:3px solid var(--green); padding-left:12px;}
@media(max-width:800px){.template-editor{grid-template-columns:1fr;} .document-top{gap:12px;} .document-heading h2{font-size:1.4rem;}}
@media print {dialog,dialog[open],.no-print{display:none!important;} .document-top{display:flex; flex-direction:row; align-items:baseline;} .document{max-width:none;} .template-moderne th{print-color-adjust:exact;} }

:root[data-theme] .document.template-moderne th {background:var(--invoice-accent);color:white;}
:root[data-theme] .document.template-minimal th {background:white;}

/* Dashboard */
.dashboard-page{display:grid;gap:24px}.dash-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.dash-heading p{color:var(--muted);max-width:760px;margin-bottom:0}.dash-period{display:flex;gap:6px;padding:5px;background:#e9eee8;border-radius:12px;flex-wrap:wrap}.dash-period button{min-height:38px;padding:8px 12px;border:0;background:transparent;font-size:.78rem}.dash-period button.active{background:#fff;box-shadow:0 2px 8px #0001;color:var(--green)}.dash-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.dash-kpi{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:150px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}.dash-kpi.featured{background:var(--green);color:#fff;border-color:var(--green)}.dash-kpi>span{font-size:.78rem;color:var(--muted);font-weight:700}.dash-kpi.featured>span,.dash-kpi.featured small{color:#d6e5db}.dash-kpi>strong{font-size:1.55rem;letter-spacing:-.5px;margin:8px 0}.dash-kpi>strong small{font-size:.7rem;font-weight:500}.dash-kpi>small{margin-top:auto;color:var(--muted);font-size:.72rem}.dash-kpi.danger>strong{color:#a52b20}.dash-trend{font-size:.72rem!important;padding:3px 7px;border-radius:999px}.dash-trend.up{background:#e5f1e6;color:#28583a}.featured .dash-trend.up{background:#ffffff20;color:#fff}.dash-trend.down{background:#fbe8e5;color:#96352c}.dash-trend.neutral{background:#eef1ed;color:var(--muted)}.dash-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}.dash-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.dash-card-head h2{margin:3px 0 0}.dash-card-head>a{font-size:.78rem;text-decoration:underline;text-underline-offset:4px}.dash-label{text-transform:uppercase;letter-spacing:1.2px;font-size:.67rem;color:var(--muted);font-weight:700}.dash-revenue>.dash-card-head>strong{font-size:1.5rem}.dash-bars{height:245px;display:grid;grid-template-columns:repeat(12,1fr);gap:10px;align-items:end;border-bottom:1px solid var(--line);padding-top:25px}.dash-bar-col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;min-width:0}.dash-bar-col>span{font-size:.62rem;color:var(--muted);white-space:nowrap}.dash-bar-track{height:175px;width:70%;display:flex;align-items:flex-end;background:#f1f4f0;border-radius:7px 7px 0 0;overflow:hidden}.dash-bar-track i{display:block;width:100%;background:var(--green);border-radius:7px 7px 0 0}.dash-bar-col small{font-size:.65rem;color:var(--muted);text-transform:capitalize}.dash-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.dash-ranking{display:grid}.dash-ranking>div{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.dash-ranking>div:last-child{border-bottom:0}.dash-ranking>div>b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#edf2eb;font-size:.72rem}.dash-ranking span strong,.dash-ranking span small{display:block}.dash-ranking span small{color:var(--muted);font-size:.72rem;margin-top:2px}.dash-ranking em{font-style:normal;font-weight:700;font-size:.85rem}.dash-insight{margin:16px 0 0;padding:12px 14px;background:#f0f4eb;border-radius:10px;font-size:.78rem}.dash-payment-grid{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:28px}.dash-donut{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--paid),#e7ece7 var(--paid) 100%);display:grid;place-items:center}.dash-donut:before{content:"";width:96px;height:96px;background:#fff;border-radius:50%;grid-area:1/1}.dash-donut>div{grid-area:1/1;z-index:1;text-align:center}.dash-donut strong,.dash-donut small{display:block}.dash-donut strong{font-size:1.4rem}.dash-donut small{font-size:.7rem;color:var(--muted)}.dash-payment-legend p{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;margin:10px 0;font-size:.82rem}.dash-payment-legend i{width:9px;height:9px;border-radius:50%}.dash-payment-legend .ok{background:var(--green)}.dash-payment-legend .wait{background:#d8a83e}.dash-payment-legend .late{background:#a52b20}.dash-footnote{font-size:.72rem;color:var(--muted);margin:18px 0 0}.dash-attention{display:grid;gap:10px}.dash-attention>button,.dash-attention>div{width:100%;display:grid;grid-template-columns:1fr auto;gap:3px 14px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:11px;background:#fafbf9;min-height:0}.dash-attention b{font-size:.82rem}.dash-attention span{grid-column:1;color:var(--muted);font-size:.74rem}.dash-attention strong{grid-column:2;grid-row:1/3;align-self:center;font-size:.72rem}.dash-products-low{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.dash-products-low>div{padding:15px;background:#f7f9f6;border-radius:11px}.dash-products-low span,.dash-products-low strong,.dash-products-low small{display:block}.dash-products-low span{font-size:.75rem;min-height:38px}.dash-products-low strong{margin:8px 0 2px}.dash-products-low small{font-size:.68rem;color:var(--muted)}
@media(max-width:1200px){.dash-kpis{grid-template-columns:repeat(3,1fr)}.dash-products-low{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.dash-heading{align-items:flex-start;flex-direction:column}.dash-two{grid-template-columns:1fr}.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-bars{gap:5px}.dash-bar-col>span{display:none}.dash-products-low{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.dash-kpis{grid-template-columns:1fr}.dash-kpi{min-height:125px}.dash-period{width:100%}.dash-period button{flex:1;padding:7px 5px}.dash-card{padding:18px}.dash-bars{height:200px}.dash-bar-track{height:135px;width:85%}.dash-payment-grid{grid-template-columns:1fr;justify-items:center}.dash-payment-legend{width:100%}.dash-products-low{grid-template-columns:1fr}.dashboard-page{gap:16px}}
/* Dashboard complet, styles limités aux nouveaux blocs. */
.dash-scroll{overflow:auto;max-width:100%}.dash-scroll table{width:100%;border-collapse:collapse;font-size:.8rem}.dash-scroll th,.dash-scroll td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.dash-scroll th{font-size:.7rem;color:var(--muted)}.dash-scroll td:first-child{min-width:140px;overflow-wrap:anywhere}.dash-chart-scroll{overflow-x:auto}.dash-comparison{display:grid;grid-template-columns:repeat(var(--cols),minmax(46px,1fr));gap:8px;min-width:calc(var(--cols)*54px)}.dash-chart-column{padding:0!important;border:0!important;background:transparent!important;display:flex;flex-direction:column;gap:10px;font-size:.7rem;min-width:0}.dash-chart-bars{height:210px;display:flex;align-items:flex-end;gap:3px;width:100%;border-bottom:1px solid var(--line)}.dash-chart-bars i{display:block;width:33%;border-radius:4px 4px 0 0}.dash-chart-bars .series-0{background:var(--green)}.dash-chart-bars .series-1{background:#b7c9b9}.dash-chart-bars .series-2{background:#d8a83e}.dash-chart-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:.8rem;margin-bottom:24px}.dash-chart-legend span:nth-child(1){color:var(--green)}.dash-chart-legend span:nth-child(2){color:#687b6c}.dash-chart-legend span:nth-child(3){color:#956d0a}.dash-recurring-value{font-size:2rem;font-weight:700;color:var(--green)}.dash-recurring-value small{font-size:.8rem}.dash-summary li{margin:16px 0;line-height:1.7}.dashboard-page details{margin-top:16px}.dashboard-page summary{cursor:pointer;font-size:.85rem}.dashboard-page button:focus-visible{outline:3px solid #d8a83e;outline-offset:3px}.dashboard-page .dash-kpi strong{font-size:clamp(1.1rem,1.65vw,1.6rem);overflow-wrap:anywhere}.dashboard-page .dash-heading{align-items:center}#feature-dialog:has(.dash-scroll){width:min(1050px,95vw);max-width:95vw}.dashboard-page{min-width:0}@media(max-width:760px){.dash-chart-bars{height:165px}.dash-chart-legend{gap:10px}.dashboard-page .dash-kpi strong{font-size:1.6rem}.dash-heading>.primary{width:100%}}

/* Impression, identité et retours applicatifs — 27/09/2026 */
.document .document-client {
  margin: 16px 0 20px auto;
  width: min(100%, 340px);
  text-align: right;
  overflow-wrap: anywhere;
}
.company-logo.logo-square,
.document-heading .company-logo.logo-square {
  width: 120px;
  height: 120px;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
}
.company-logo.logo-rectangle,
.document-heading .company-logo.logo-rectangle {
  width: auto;
  height: auto;
  max-width: 190px;
  max-height: 100px;
  object-fit: contain;
}
.verify-action {display:flex; flex-direction:column; align-items:flex-end; max-width:430px;}
.verify-action .error {width:100%; text-align:right; margin:10px 0 0; line-height:1.5;}
.verify-action .error:empty,.application-error:empty {display:none;}
.application-error {margin:16px 0; padding:14px 16px; border:1px solid #dca8a2; border-left:4px solid #a52b20; border-radius:8px; background:#fff4f2; color:#84271f; font-size:.92rem; line-height:1.5; overflow-wrap:anywhere;}
.application-error details {margin-top:10px;}
.application-error pre {white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow:auto; font-size:.78rem;}
.application-error:focus,.verify-action .error:focus {outline:2px solid #a52b20; outline-offset:3px;}
.danger-button {color:#a52b20; border-color:#dca8a2;}
.document-actions .document-toolbar {align-items:center;gap:12px;margin-bottom:0;}
.document-state {display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--canvas);color:var(--green);font-size:.82rem;font-weight:700;line-height:1.4;max-width:100%;}
.document-state-dot {width:7px;height:7px;flex-shrink:0;border-radius:50%;background:currentColor;}
.document-toolbar > button {margin:0;}
@media(max-width:760px){.document-actions .document-toolbar{gap:10px;}.document-toolbar > .document-state{margin-right:auto;}}
@media(max-width:650px) {.verify-action {max-width:100%; width:100%;} .verify-action button {width:100%;}}
@media print {
  @page {size:A4; margin:14mm;}
  html, body, .layout, .workspace, main, #main {
    background:#fff !important;
    background-image:none !important;
    color:#18231d;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .layout, .workspace, main {display:block !important;}
  html::before, html::after, body::before, body::after,
  .layout::before, .layout::after, .workspace::before, .workspace::after,
  main::before, main::after {content:none !important; display:none !important;}
  header, aside, dialog, dialog[open], .no-print, #toast, .skip,
  .steps, .intro, .form-footer, #error, .application-error {display:none !important;}
  dialog::backdrop {background:transparent !important;}
  #main > .panel {padding:0 !important; border:0 !important; background:white !important;}
  .document {background:white !important; border:0 !important; border-radius:0; box-shadow:none; padding:0 !important; margin:0; max-width:none; font-size:10pt; line-height:1.35;}
  .document-heading, .document-top, .document-client, .total, .payment-qr, .demo-stamp, .document-legal {break-inside:avoid;}
  .document-heading {margin-bottom:10px;}
  .document-top {display:flex; flex-direction:row; align-items:baseline;}
  .document p {margin-top:8px; margin-bottom:8px;}
  .document .document-client {margin:12px 0 16px auto;}
  .document table {font-size:9pt; margin-top:14px;}
  .document th,.document td {padding:7px 6px; overflow-wrap:anywhere;}
  .document th:first-child,.document td:first-child {width:46%;}
  .document thead {display:table-header-group;}
  .document tr {break-inside:avoid;}
  .document h3 {break-after:avoid;}
  .document .total {margin-top:12px;}
  .document .payment-qr {gap:16px; margin-top:14px; flex-wrap:nowrap;}
  .document .payment-qr svg {width:35mm; height:35mm;}
  .document .demo-stamp {margin-top:14px; padding:8px; break-after:avoid;}
  .document .document-legal {font-size:8pt !important; margin-top:8px !important;}
}
@media print { *:focus {outline:none !important;} }

/* Invoice appearance is independent of the profession theme. */
.document {--green:#194739;--ink:#172e28;--muted:#57665f;--line:#dce3dd; color:var(--ink);}
.document.template-bleu_nuit {--green:var(--invoice-accent);--ink:#18212b;--muted:#59616a;--line:#d5dce3;font-family:Arial,sans-serif;border-radius:0;}
.document.template-bleu_nuit .document-heading {border-bottom:2px solid var(--invoice-accent);padding-bottom:18px;margin-bottom:24px;align-items:center;}
.invoice-title {text-align:right;margin-left:auto;}
.document.template-bleu_nuit .invoice-title h2 {font-family:Georgia,serif;letter-spacing:0;font-size:30px;}
.invoice-parties {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;break-inside:avoid;}
.invoice-buyer {text-align:right;}
.document.template-bleu_nuit .party-heading {font-family:Arial,sans-serif;font-size:18px;line-height:1.3;font-weight:700;color:var(--invoice-accent);margin:0;overflow-wrap:anywhere;}
.invoice-parties p {font-size:14px;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere;}
.document.template-bleu_nuit .invoice-dates {font-size:13px;margin:24px 0 18px;}
.document.template-bleu_nuit .invoice-job {font:700 14px Arial,sans-serif;margin:12px 0;}
.document.template-bleu_nuit table {font-size:12px;margin-top:14px;table-layout:auto;}
.document.template-bleu_nuit th {background:var(--invoice-accent);color:var(--invoice-on-accent,#fff);font-size:12px;}
.document.template-bleu_nuit td {font-size:12px;}
.document.template-bleu_nuit td:first-child {width:48%;overflow-wrap:anywhere;}
.document.template-bleu_nuit th,.document.template-bleu_nuit td {padding:10px 7px;}
.document.template-bleu_nuit .total {font-size:14px;width:320px;max-width:100%;margin-left:auto;}
.document.template-bleu_nuit .grand {background:var(--invoice-accent);color:var(--invoice-on-accent,#fff);padding:10px;font-size:15px;}
.invoice-payment {margin-top:24px;border-top:1px solid var(--invoice-accent);padding-top:14px;break-inside:avoid;}
.document.template-bleu_nuit .invoice-payment p,.document.template-bleu_nuit .document-legal {font-size:12px;}
.document.template-bleu_nuit .payment-qr {margin:0 0 12px;}
.document.template-bleu_nuit .payment-qr svg {width:132px;height:132px;min-width:132px;}
.pdf-export .document {width:182mm;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:white;box-shadow:none;}
.pdf-export {background:white;color:#18212b;}
@media print {.document.template-bleu_nuit th,.document.template-bleu_nuit .grand {print-color-adjust:exact;-webkit-print-color-adjust:exact;} .invoice-parties {display:grid;grid-template-columns:1fr 1fr;} .document.template-bleu_nuit td {font-size:9pt;} }

/* Version and shared document layout, v2026.09.28.2 */
.app-version {margin-top:auto;padding:16px 12px 6px;font-size:11px;opacity:.75;color:inherit;}
.document .document-heading {border-bottom:1px solid var(--invoice-accent);padding-bottom:18px;margin-bottom:24px;}
.document .party-heading {font-family:Arial,sans-serif;font-size:18px;line-height:1.3;font-weight:700;color:var(--invoice-accent);margin:0;overflow-wrap:anywhere;}
.document .invoice-buyer .invoice-dates {text-align:right;font-size:13px;margin:18px 0 0;}
.document .invoice-job {font-size:14px;margin:18px 0 12px;}
.document.template-classique th {background:var(--invoice-accent);color:var(--invoice-on-accent);}
.document.template-classique .grand {border-top-color:var(--invoice-accent);}
.document.template-cuivre {--ink:#202020;--muted:#5b5b5b;--line:#e2d8d0;}
.document.template-cuivre .invoice-title h2 {color:#202020;}
.document.template-cuivre .document-heading {border-bottom-width:2px;}
.document.template-cuivre .grand {border-left:5px solid #202020;}
@media print {.app-version {display:none!important;} .document th {print-color-adjust:exact;-webkit-print-color-adjust:exact;} }
.vat-controls{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0}.vat-controls .field{min-width:120px;margin:0}.vat-controls p{margin:0}.vat-controls small{color:var(--muted)}.vat-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.vat-totals>div{display:grid;gap:8px;padding:20px;background:#f3f6f1;border-radius:12px}.vat-totals span,.vat-totals small{font-size:.78rem;color:var(--muted)}.vat-totals strong{font-size:1.6rem;color:var(--green)}.vat-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:20px 0}.vat-panel details{margin-top:16px}.vat-panel summary{cursor:pointer;font-weight:600;padding:10px 0}.vat-panel li{margin-bottom:8px}.vat-panel .dash-card-head{flex-wrap:wrap;gap:10px}@media(max-width:760px){.vat-totals{grid-template-columns:1fr}.vat-controls{gap:12px}.vat-actions>*{width:100%}}