@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{--ink:#16332e;--green:#164b3c;--lime:#d8f08a;--paper:#f4f5f0;--line:#dfe5dc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 system-ui,-apple-system,Arial,sans-serif}aside{position:fixed;inset:0 auto 0 0;width:230px;background:#153b31;color:#f8fff0;padding:36px 24px;display:flex;flex-direction:column}.brand{font-size:34px;font-weight:800;color:white;text-decoration:none;letter-spacing:-2px}.brand span{display:block;font-size:10px;letter-spacing:3px;color:var(--lime);margin-top:4px}nav{display:grid;gap:12px;margin-top:65px}nav a{color:#edf4e9;text-decoration:none;padding:12px 10px;border-radius:8px}nav a:hover{background:#ffffff14}.aside-bottom{margin-top:auto;font-size:11px;color:#b7cbbc}main{margin-left:230px;padding:0 42px 60px;max-width:1550px}header{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-bottom:40px;font-size:11px;letter-spacing:1px}header form{display:flex;align-items:center;gap:14px}h1{font-size:clamp(28px,3vw,43px);line-height:1.15;letter-spacing:-1.5px;margin:10px 0 18px;font-weight:650}h2{font-size:17px;margin:0 0 22px}h2 span{margin-left:10px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#64825b}.sub{color:#6a786f;margin-bottom:30px}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,1fr);gap:26px;align-items:start}.card{background:white;border:1px solid var(--line);border-radius:16px;padding:28px;margin-bottom:22px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}label{display:grid;gap:7px;font-size:12px;font-weight:600}input,select{width:100%;border:1px solid #d5dfd4;border-radius:8px;padding:12px;background:#fcfdfb;color:var(--ink);font:inherit;font-size:14px}input:focus,select:focus{outline:2px solid #a8c97b;outline-offset:2px}button,.button{cursor:pointer;border:0;border-radius:8px;padding:13px 19px;background:var(--green);color:white;font:600 13px system-ui;text-decoration:none;display:inline-block}button:hover,.button:hover{filter:brightness(1.12)}.secondary{background:#edf2e7;color:var(--ink);border:1px solid #d4dfc9}.quiet{background:none;color:var(--ink);padding:7px}.actions{display:flex;gap:10px;flex-wrap:wrap}.total{background:var(--green);color:white}.total .eyebrow{color:var(--lime)}.total strong{font-size:40px;font-weight:600;letter-spacing:-1px}.total>p{color:#d1e1cb;font-size:12px}.metrics{border-top:1px solid #ffffff30;margin-top:24px;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:11px}.metrics b{display:block;font-size:20px;margin-top:5px}.cost-line{display:flex;justify-content:space-between;gap:15px;font-size:12px;padding:12px 0;border-bottom:1px solid #edf0e8}.cost-line b{white-space:nowrap}.note{background:#eaf0de;padding:22px;border-radius:12px;font-size:12px;color:#546d46}.note p{margin-bottom:0}.alert{background:#fff1d7;border:1px solid #edcd92;border-radius:10px;padding:18px;font-size:13px}.success{background:#e5f3d7;padding:16px}.auth{max-width:540px;margin:55px auto}.auth label{margin-bottom:20px}table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}td,th{padding:16px 12px;border-bottom:1px solid var(--line)}td a{color:var(--green);font-weight:bold}small{display:block;color:#768474}th{font-size:10px;text-transform:uppercase;letter-spacing:1px}.table-wrap{overflow:auto}.check{display:flex;align-items:center}.check input{width:auto}.client-quote{display:none}.print-view main>:not(.client-quote){display:none}.print-view .client-quote{display:block;background:white;padding:45px;max-width:850px;margin:40px auto}.client-quote button{margin-right:20px}[hidden]{display:none!important}@media(max-width:1000px){aside{width:180px;padding:28px 16px}main{margin-left:180px;padding:0 24px 40px}.workspace{grid-template-columns:1fr}.summary{display:grid;gap:20px}.card{padding:22px}.brand{font-size:29px}}@media(max-width:650px){aside{position:static;width:auto;padding:18px 22px}.brand{font-size:27px}.brand span{display:none}nav{display:flex;gap:10px;margin-top:12px;font-size:11px}nav a{padding:6px}.aside-bottom{display:none}main{margin-left:0;padding:0 18px 40px}header{height:65px;margin-bottom:25px}header>span{display:none}.fields{grid-template-columns:1fr 1fr;gap:12px}.total strong{font-size:34px}.card{padding:20px}input,select{padding:10px;min-width:0}h1{font-size:31px}}@media print{body{background:white}aside,main>:not(.client-quote),.client-quote button,.client-quote a{display:none!important}main{margin:0;padding:0}.client-quote{display:block!important;padding:20px!important;margin:0!important}h1{font-size:32px}}


/* Identité extraite de brand.css de faticom.com : prune, citron et blanc cassé. */
:root{--ink:#251c27;--green:#281030;--lime:#c7d02c;--paper:#f7f7f2;--line:rgba(40,16,48,.13)}body{font-family:'DM Sans',sans-serif}h1,h2,h3,.total strong{font-family:Manrope,sans-serif}aside{background:#281030}.brand{letter-spacing:0}.brand img{display:block;width:165px;height:auto}.brand span{margin-top:18px;font-size:9px;letter-spacing:2.6px;color:#c7d02c}.aside-bottom{color:#b4a4b9}nav a{border-radius:999px;font-size:13px}nav a.active{background:#c7d02c;color:#281030}h1{font-size:clamp(30px,3.2vw,45px);letter-spacing:-.055em;font-weight:750}.eyebrow{color:#951b81}button,.button{border-radius:999px;background:#c7d02c;color:#281030;padding:14px 22px}.secondary{background:white;color:#281030;border-color:#28103033}.total{background:#281030}.total>p{color:#d2c4d6}.total .eyebrow{color:#c7d02c}.card{border-radius:22px}.note{background:#f0eaf2;color:#6e5278;border:1px solid #e4dce7}.sub{color:#716a73}.metrics{border-color:#ffffff25}.quiet{background:none;color:#281030}input,select{background:#fdfdfb;border-color:#ded9e1;border-radius:10px}input:focus,select:focus{outline-color:#c7d02c}.formhelp{font-size:12px;color:#716a73}.paper-picker{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}.section-title{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:25px;margin-top:12px}.section-title i{display:grid;place-items:center;font-size:11px;font-style:normal;width:29px;height:29px;border-radius:50%;background:#f0eaf2;color:#951b81}.summary{position:sticky;top:20px}.book-art{position:relative;margin:16px auto 26px;width:110px;height:145px;background:#c7d02c;transform:rotate(-7deg);border-radius:2px 9px 9px 2px;box-shadow:5px 5px 0 #ded8df,8px 8px 0 #fff,10px 10px 0 #a99bad,20px 25px 35px #0003;color:#281030;padding:15px;border-left:8px solid #a8b122;display:flex;flex-direction:column;justify-content:space-between;font:700 13px Manrope,sans-serif}.book-art small{font-size:8px;letter-spacing:2px;color:#281030}.summary .note{margin-top:20px}.selection-chip{display:inline-block;font-size:11px;border:1px solid #ded5e1;border-radius:999px;padding:5px 10px;margin:3px;color:#604569}.settings-group{margin-top:30px}.settings-group h2{border-bottom:1px solid var(--line);padding-bottom:14px}.settings-group small{font-size:10px;color:#89738d;margin-top:3px}.toast{padding:14px;border-radius:12px;background:#eaf0cb;font-size:13px}.preview-status{font-size:10px;letter-spacing:1px;color:#837288}.summary h2{font-size:16px}.product-tabs{display:flex;gap:10px;margin-bottom:25px}.product-tabs button{background:white;border:1px solid #ded5e1;color:#604569}.product-tabs button[aria-pressed=true]{background:#281030;color:white}.cost-line:last-child{border:0}.summary .card>p{font-size:12px}.summary .total strong{font-size:38px}@media(max-width:1000px){.summary{position:static}.brand img{width:140px}}@media(max-width:650px){.brand img{width:125px}.brand span{display:none}.paper-picker{gap:12px}.product-tabs{overflow:auto}.product-tabs button{white-space:nowrap;font-size:11px;padding:10px 14px}nav a{font-size:11px}.summary .total strong{font-size:34px}}@media print{.summary{position:static}}
.choice-field{border:0;padding:0;margin:0;min-width:0}.choice-field legend{font-size:12px;font-weight:600;margin-bottom:10px;padding:0}.choice-buttons{display:flex;flex-wrap:wrap;gap:8px}.choice-button{border:1px solid #ded5e1;background:#fff;color:#604569;border-radius:12px;padding:12px 14px;font-weight:500;min-height:45px;flex:1 0 auto;text-align:center}.choice-button[aria-pressed=true]{border-color:#281030;background:#281030;color:white;box-shadow:inset 0 0 0 1px #281030}.choice-button[aria-pressed=true]:before{content:'✓ ';color:#c7d02c;font-weight:700}.number-control{display:flex;align-items:center;border:1px solid #ded5e1;background:white;border-radius:12px;overflow:hidden}.number-control input{border:0;text-align:center;min-width:0;-moz-appearance:textfield}.number-control input::-webkit-inner-spin-button{appearance:none}.number-control button{border-radius:0;background:#f0eaf2;color:#281030;font-size:20px;padding:8px 14px;min-height:46px}.quick-values{display:flex;gap:6px;margin-top:7px}.quick-values button{padding:6px 12px;background:#f0eaf2;color:#604569;border-radius:8px;font-size:11px}.calculator .fields{align-items:start}.paper-picker{align-items:start}#example-reset{margin-left:8px;font-size:11px;padding:14px} @media(max-width:650px){.fields,.paper-picker{grid-template-columns:1fr}.choice-button{font-size:12px}#example-reset{margin:10px 0 0}}

.custom-format{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:15px}.fields>label{align-content:start}.number-control{height:48px}.number-control input{height:46px}

/* Compact working view: three clear steps, no decorative product illustration. */
.book-art,.product-tabs,.preview-status{display:none}h1{font-size:29px!important;margin-bottom:10px}.sub{font-size:13px;margin-bottom:20px}header{height:65px;margin-bottom:24px}.card{padding:22px;border-radius:14px}.workspace{gap:20px;grid-template-columns:minmax(0,1.5fr) minmax(260px,.85fr)}.summary .total strong{font-size:30px}.summary .card{margin-bottom:14px}.metrics b{font-size:18px}.summary .note{font-size:11px;padding:14px}.wizard-nav{display:flex;gap:6px;margin:0 0 22px;padding:0;background:none}.wizard-nav button{flex:1;border-radius:8px;border:1px solid #ded5e1;background:#f7f7f2;color:#716a73;padding:10px 8px;font-size:12px;white-space:nowrap}.wizard-nav button.active{background:#281030;color:#fff;border-color:#281030}.wizard-nav button.active:before{content:none}.wizard-step>h2{font-size:17px;margin:0 0 20px;border:0;padding:0}.wizard-step>h2 i{display:none}.choice-button{padding:9px 11px;min-height:38px;border-radius:8px;font-size:12px}.fields{gap:16px;margin-bottom:20px}.paper-picker{gap:16px}.choice-buttons{gap:6px}.wizard-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:16px;margin:10px 0 16px}.wizard-footer button{font-size:12px;padding:10px 16px}.number-control{height:40px}.number-control input{height:38px}.number-control button{min-height:38px;padding:4px 12px}.quick-values button{padding:4px 10px}.formhelp{font-size:11px}.calculator>button{font-size:12px;padding:11px 16px}.summary{top:16px}.selection-chip{font-size:10px}.aside-bottom{font-size:10px}main{padding-top:0}.eyebrow{font-size:9px}.section-title{gap:0}.wizard-step .fields:last-child{margin-bottom:12px}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.summary{display:block;position:static}.summary .total{padding:20px}.summary .total .metrics{margin-top:14px;padding-top:14px}}@media(max-width:650px){.wizard-nav{gap:4px}.wizard-nav button{font-size:11px;padding:10px 5px}.card{padding:17px}h1{font-size:26px!important}}

.wizard-nav{display:grid;grid-template-columns:repeat(4,1fr)}input[name="qty"],input[name="pages"]{appearance:textfield}input[name="qty"]::-webkit-inner-spin-button,input[name="pages"]::-webkit-inner-spin-button{appearance:none}@media(max-width:650px){.wizard-nav{grid-template-columns:repeat(2,1fr)}}

.config-sentence{display:block;width:100%;resize:vertical;min-height:145px;padding:12px;border:1px solid var(--line);border-radius:8px;font:13px/1.7 'DM Sans',sans-serif;color:var(--ink);background:#fcfcf9;margin-bottom:12px}.config-sentence:focus{outline:2px solid #c7d02c}#copy-status{display:block;margin-top:8px;color:#716a73}

.livret-icon{width:24px;height:24px;flex:0 0 24px;vertical-align:middle}.choice-button{display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left}.choice-button[aria-pressed=true]:before{content:none}.choice-button[aria-pressed=true] .livret-icon{color:#c7d02c}.wizard-nav button{display:flex;align-items:center;justify-content:center;gap:7px}.wizard-nav .livret-icon{width:20px;height:20px;flex-basis:20px}.wizard-nav button.active .livret-icon{color:#c7d02c}@media(max-width:650px){.choice-button{gap:8px}.livret-icon{width:22px;height:22px;flex-basis:22px}.wizard-nav button{gap:5px}}

.vinyl-nav{grid-template-columns:repeat(3,1fr)}.vinyl-step .choice-field{margin:15px 0 24px}.vinyl-step h2{margin-bottom:20px}.vinyl-step .choice-buttons{gap:10px}.vinyl-step label{max-width:100%}

.bache-step h2{margin-bottom:20px}.bache-step .choice-field{margin:15px 0 24px}#eyelet-count{margin:18px 0}

/* Multi-line quote */
[data-quote-rows] p { margin: .35rem 0; overflow-wrap: anywhere; }
[data-quote-draft] .table-wrap { margin: 1rem 0; }
[data-quote-draft] .actions { gap: 1rem; flex-wrap: wrap; }
@media print {
  main > h1:has(+ [data-quote-draft]),
  main > .eyebrow:has(+ h1 + [data-quote-draft]),
  main > [data-quote-draft] { display: block !important; }
  [data-quote-draft] .quote-tools,
  [data-quote-draft] [data-quote-status] { display: none !important; }
  [data-quote-draft] { border: 0; box-shadow: none; padding: 0; }
  [data-quote-draft] .table-wrap { overflow: visible; }
  [data-quote-draft] tr { break-inside: avoid; }
}

.quote-next { margin-top: .75rem; }
.quote-next a { display: inline-block; font-weight: 700; }
@media (max-width: 650px) {
  aside nav { flex-wrap: wrap; }
}

.quote-letterhead { margin: 0 0 1.25rem; }
.quote-letterhead img { display: block; width: 100%; height: auto; }
.quote-letterhead .quote-letterhead-watermark,
.quote-letterhead .quote-letterhead-footer { display: none; }

@page faticom-quote { size: A4; margin: 39mm 12mm 25mm; }

@media print {
  main:has([data-quote-draft], .client-quote) { page: faticom-quote; }
  main > .quote-letterhead { display: block !important; }
  .quote-letterhead { margin: 0; }
  .quote-letterhead .quote-letterhead-header {
    position: fixed;
    top: -31mm;
    left: 0;
  }
  .quote-letterhead .quote-letterhead-footer {
    display: block;
    position: fixed;
    bottom: -18mm;
    left: 0;
  }
  .quote-letterhead .quote-letterhead-watermark {
    display: block;
    position: fixed;
    top: 70mm;
    left: 0;
    z-index: -1;
  }
  main > .client-quote { padding: 0 !important; }
  main > [data-quote-draft], main > .client-quote { background: transparent; }
}

@media screen {
  main:has(> [data-quote-draft]),
  .print-view .client-quote {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-bottom: 1rem;
  }
  .print-view .client-quote { min-height: calc(100dvh - 80px); }
  main:has(> [data-quote-draft]) > .quote-letterhead,
  .client-quote > .quote-letterhead { display: contents; }
  .quote-letterhead .quote-letterhead-header {
    flex: none;
    margin-bottom: 1.25rem;
  }
  .quote-letterhead .quote-letterhead-footer {
    display: block;
    flex: none;
    order: 1;
    margin-top: auto;
    padding-top: 1.5rem;
  }
  @media (max-width: 650px) {
    body:has(main > [data-quote-draft]) {
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
    }
    main:has(> [data-quote-draft]) { flex: 1; min-height: 0; }
  }
}

@media print {
  .quote-letterhead img { width: 186mm; }
}

/* Paper preview uses the same letterhead and footer as the printed quote. */
@media screen {
  main:has(> .quote-paper) { padding-top: 1rem; }
  .quote-paper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 860px);
    aspect-ratio: 210 / 297;
    margin: 0 auto 1.5rem;
    padding: clamp(12px, 3vw, 38px);
    border: 1px solid #252025;
    background: white;
    isolation: isolate;
  }
  .quote-paper > .quote-letterhead { display: contents; }
  .quote-paper .quote-letterhead-header { margin-bottom: clamp(18px, 5vw, 56px); }
  .quote-paper .quote-letterhead-watermark {
    display: block;
    position: absolute;
    width: 92%;
    left: 4%;
    bottom: 12%;
    z-index: -1;
  }
  .quote-paper > [data-quote-draft] {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .quote-paper h1 { margin-bottom: .5rem; }
  .quote-paper [data-quote-draft] table { background: rgba(255, 255, 255, .88); }
}
@media print {
  main > .quote-paper { display: block !important; }
  .quote-paper::before {
    content: '';
    position: fixed;
    inset: -37mm -10mm -23mm;
    border: .25mm solid #252025;
    pointer-events: none;
  }
  .quote-paper [data-quote-draft] { border: 0; padding: 0; box-shadow: none; background: transparent; }
  .quote-paper [data-quote-draft] table { width: 100%; }
  .quote-paper [data-quote-rows] td:not(:first-child),
  .quote-paper tfoot td { white-space: nowrap; }
}

.quote-add-product { margin: 1rem 0; }
.quote-add-product a {
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.summary .total > [data-add-quote-line] {
  display: block;
  width: 100%;
  margin-top: .75rem;
}

/* Measure and print the same physical sheets. Each sheet owns its letterhead. */
.quote-print-output {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 209mm;
  visibility: hidden;
}
.quote-print-sheet {
  position: relative;
  width: 209mm;
  height: 296mm;
  background: white;
  color: #201a21;
  font: 10pt/1.4 Arial, sans-serif;
  isolation: isolate;
}
.quote-print-sheet::before {
  content: '';
  position: absolute;
  inset: 2mm;
  border: .25mm solid #252025;
  pointer-events: none;
}
.quote-print-sheet .quote-letterhead img {
  display: block;
  position: absolute;
  width: 185mm;
  height: auto;
  left: 12mm;
}
.quote-print-sheet .quote-letterhead-header { top: 9mm; margin: 0; }
.quote-print-sheet .quote-letterhead-footer { bottom: 8mm; padding: 0; }
.quote-print-sheet .quote-letterhead-watermark { bottom: 28mm; top: auto; z-index: -1; }
.quote-print-content {
  position: absolute;
  inset: 45mm 10mm 27mm;
  overflow-wrap: anywhere;
}
.quote-print-content h1 { margin: 0 0 3mm; font: 22pt/1.15 Arial, sans-serif; }
.quote-print-content > p { margin: 0 0 5mm; }
.quote-print-content table { width: 100%; border-collapse: collapse; background: transparent; }
.quote-print-content th, .quote-print-content td {
  padding: 2.4mm 1.6mm;
  border-bottom: .2mm solid #c8c1ca;
}
.quote-print-content :is(th, td):not(:first-child) { white-space: nowrap; }
.quote-print-content tbody p { margin: .8mm 0 0; }
.quote-print-content .quote-tools { display: none !important; }

@page faticom-output { size: A4; margin: 0; }
@media print {
  body:has(> .quote-print-output) { display: block; margin: 0; padding: 0; }
  body:has(> .quote-print-output) > :not(.quote-print-output) { display: none !important; }
  .quote-print-output {
    position: static;
    visibility: visible;
    page: faticom-output;
  }
  .quote-print-sheet { break-inside: avoid; break-after: page; }
  .quote-print-sheet:last-child { break-after: auto; }
  .quote-print-sheet .quote-letterhead-watermark { top: auto; }
}

.project-details { margin-bottom: 1rem; }
.project-details h2, .product-details > h2 { margin-top: 0; }
.calculator-side { min-width: 0; }
.calculation-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.calculator-side .summary { position: static; }
.unit-price-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-top: .75rem;
}
.unit-price-pair > div {
  background: rgba(255, 255, 255, .11);
  border-radius: .65rem;
  padding: .65rem;
  font-size: .75rem;
  color: #eee4ee;
}
.unit-price-pair b { display: block; color: white; font-size: clamp(.92rem, 1.6vw, 1.12rem); }
@media screen and (min-width: 850px) {
  .workspace { grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); }
  .calculator-side { position: sticky; top: 1rem; }
}