/* ========================================================= FACTURATION.CSS — module FacturePro (outil de devis/factures) Chargé uniquement par le gabarit tpl-pro : FacturePro n'est pas une page, c'est un panneau du tableau de bord professionnel. Elle n'a jamais eu de gabarit a elle. Scopé sous #pg-facturation pour ne rien casser ailleurs. ⚠️ NOTE CONFORMITÉ : ce module stocke les données en localStorage (voir js/facturation.js). Ce n'est pas conforme à la législation anti-fraude TVA française (art. 88 loi de finances 2016 / certification NF203) qui impose inaltérabilité, sécurisation, conservation et archivage des factures. Ne pas utiliser tel quel avec de vrais artisans / vraies factures. ========================================================= */ #pg-facturation { --fp-orange: #FF6B35; --fp-orange-d: #E8541E; --fp-orange-l: #fff3ee; --fp-navy: #0f0f23; --fp-teal: #0d9488; --fp-teal-l: #e0f2f1; --fp-green: #16a34a; --fp-green-l: #dcfce7; --fp-amber: #d97706; --fp-amber-l: #fef3c7; --fp-red: #dc2626; --fp-red-l: #fee2e2; --fp-blue: #2563eb; --fp-blue-l: #dbeafe; --fp-g50: #f9fafb; --fp-g100: #f3f4f6; --fp-g200: #e5e7eb; --fp-g300: #d1d5db; --fp-g400: #9ca3af; --fp-g500: #6b7280; --fp-g600: #4b5563; --fp-g700: #374151; --fp-g800: #1f2937; font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; } #pg-facturation.on { display: flex !important; flex-direction: column; height: calc(100vh - 44px); overflow: hidden; } #pg-facturation * { box-sizing: border-box; } #pg-facturation h1,#pg-facturation h2,#pg-facturation h3,#pg-facturation h4 { font-family: 'DM Sans', sans-serif; } #pg-facturation button { font-family: 'DM Sans', sans-serif; cursor: pointer; } #pg-facturation input, #pg-facturation select, #pg-facturation textarea { font-family: 'DM Sans', sans-serif; } #pg-facturation .fp-app { display: flex; flex: 1; overflow: hidden; height: 100%; } #pg-facturation .fp-sidebar { width: 220px; background: var(--fp-navy); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; } #pg-facturation .fp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } #pg-facturation .fp-content { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; background: #f9fafb; } #pg-facturation .fp-topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: .875rem 1.75rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #pg-facturation .fps-logo { padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.07); font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 900; color: #fff; } #pg-facturation .fps-logo span { color: var(--fp-orange); } #pg-facturation .fps-artisan { padding: .875rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.07); } #pg-facturation .fps-name { font-size: 15px; font-weight: 700; color: #fff; } #pg-facturation .fps-job { font-size: 13px; color: rgba(255,255,255,.35); margin-top: 1px; } #pg-facturation .fps-sec { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.2); text-transform: uppercase; letter-spacing: .1em; padding: .625rem 1.25rem .25rem; } #pg-facturation .fps-item { display: flex; align-items: center; gap: 9px; padding: 9px 1.25rem; font-size: 15px; color: rgba(255,255,255,.45); cursor: pointer; border-left: 2px solid transparent; transition: all .15s; } #pg-facturation .fps-item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); } #pg-facturation .fps-item.fp-active { color: #fff; background: rgba(255,107,53,.12); border-left-color: var(--fp-orange); font-weight: 600; } #pg-facturation .fps-badge { margin-left: auto; background: var(--fp-orange); color: #fff; border-radius: 100px; font-size: 13px; font-weight: 700; padding: 1px 6px; } #pg-facturation .fps-bottom { padding: .875rem 1.25rem; border-top: 1px solid rgba(255,255,255,.07); margin-top: auto; } #pg-facturation .fps-cta { width: 100%; background: var(--fp-orange); color: #fff; border: none; border-radius: 9px; padding: 9px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all .15s; } #pg-facturation .fps-cta:hover { background: var(--fp-orange-d); } #pg-facturation .fp-title { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 900; } #pg-facturation .fp-sub { font-size: 14px; color: var(--fp-g400); margin-top: 1px; } #pg-facturation .fp-topbar-actions { display: flex; gap: 8px; } #pg-facturation .fp-view { display: none; } #pg-facturation .fp-view.fp-active { display: block; } #pg-facturation .fp-btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: all .15s; cursor: pointer; } #pg-facturation .fp-btn-primary { background: var(--fp-orange); color: #fff; } #pg-facturation .fp-btn-primary:hover { background: var(--fp-orange-d); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,53,.3); } #pg-facturation .fp-btn-secondary { background: #fff; color: var(--fp-g700); border: 1.5px solid var(--fp-g200); } #pg-facturation .fp-btn-secondary:hover { border-color: var(--fp-g400); } #pg-facturation .fp-btn-ghost { background: none; color: var(--fp-g500); padding: 7px 10px; border: none; border-radius: 8px; } #pg-facturation .fp-btn-ghost:hover { background: var(--fp-g100); color: var(--fp-g800); } #pg-facturation .fp-btn-danger { background: var(--fp-red-l); color: var(--fp-red); border: none; } #pg-facturation .fp-btn-sm { padding: 6px 12px; font-size: 14px; } #pg-facturation .fp-btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 7px; font-size: 14px; } #pg-facturation .fp-kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 1.5rem; } #pg-facturation .fp-kpi { background: #fff; border: 1px solid var(--fp-g200); border-radius: 14px; padding: 1.1rem; position: relative; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); } #pg-facturation .fp-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } #pg-facturation .fp-kpi.c-orange::before { background: var(--fp-orange); } #pg-facturation .fp-kpi.c-teal::before { background: var(--fp-teal); } #pg-facturation .fp-kpi.c-green::before { background: var(--fp-green); } #pg-facturation .fp-kpi.c-amber::before { background: var(--fp-amber); } #pg-facturation .fp-kpi-label { font-size: 14px; font-weight: 700; color: var(--fp-g400); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; } #pg-facturation .fp-kpi-value { font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 900; line-height: 1; margin-bottom: 3px; } #pg-facturation .fp-kpi-delta { font-size: 13px; color: var(--fp-g400); } #pg-facturation .fp-kpi-icon { position: absolute; top: 1rem; right: 1rem; font-size: 20px; opacity: .12; } #pg-facturation .fp-kpi-delta.up { color: var(--fp-green); } #pg-facturation .fp-card { background: #fff; border: 1px solid var(--fp-g200); border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; margin-bottom: 1rem; } #pg-facturation .fp-card-header { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.25rem; border-bottom: 1px solid var(--fp-g100); } #pg-facturation .fp-card-title { font-size: 14px; font-weight: 700; } #pg-facturation .fp-card-actions { display: flex; gap: 8px; align-items: center; } #pg-facturation .fp-search { border: 1.5px solid var(--fp-g200); border-radius: 8px; padding: 7px 11px; font-size: 13px; outline: none; width: 180px; } #pg-facturation .fp-search:focus { border-color: var(--fp-orange); } #pg-facturation .fp-table { width: 100%; border-collapse: collapse; } #pg-facturation .fp-table th { font-size: 14px; font-weight: 700; color: var(--fp-g400); text-transform: uppercase; letter-spacing: .06em; padding: 9px 1.1rem; text-align: left; border-bottom: 1px solid var(--fp-g100); white-space: nowrap; } #pg-facturation .fp-table td { padding: 11px 1.1rem; font-size: 13px; border-bottom: 1px solid var(--fp-g50); vertical-align: middle; } #pg-facturation .fp-table tr:last-child td { border-bottom: none; } #pg-facturation .fp-table tbody tr { cursor: pointer; transition: background .1s; } #pg-facturation .fp-table tbody tr:hover td { background: var(--fp-g50); } #pg-facturation .fp-td-primary { font-weight: 700; color: var(--fp-g800); } #pg-facturation .fp-td-mono { font-size: 13px; color: var(--fp-g500); font-variant-numeric: tabular-nums; } #pg-facturation .fp-td-amount { font-weight: 700; font-family: 'DM Sans', sans-serif; color: var(--fp-orange); } #pg-facturation .fp-empty { text-align: center; padding: 3rem; color: var(--fp-g400); } #pg-facturation .fp-empty-icon { font-size: 40px; margin-bottom: .75rem; } #pg-facturation .fp-empty-title { font-size: 14px; font-weight: 700; color: var(--fp-g600); margin-bottom: 4px; } #pg-facturation .fp-empty-sub { font-size: 13px; } #pg-facturation .fp-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 100px; padding: 3px 9px; font-size: 13px; font-weight: 700; white-space: nowrap; } #pg-facturation .fp-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } #pg-facturation .fp-b-brouillon { background: var(--fp-g100); color: var(--fp-g500); } #pg-facturation .fp-b-brouillon::before { background: var(--fp-g400); } #pg-facturation .fp-b-envoye { background: var(--fp-blue-l); color: var(--fp-blue); } #pg-facturation .fp-b-envoye::before { background: var(--fp-blue); } #pg-facturation .fp-b-paye { background: var(--fp-green-l); color: var(--fp-green); } #pg-facturation .fp-b-paye::before { background: var(--fp-green); } #pg-facturation .fp-b-accepte { background: var(--fp-green-l); color: var(--fp-green); } #pg-facturation .fp-b-accepte::before { background: var(--fp-green); } #pg-facturation .fp-b-refuse { background: var(--fp-red-l); color: var(--fp-red); } #pg-facturation .fp-b-refuse::before { background: var(--fp-red); } #pg-facturation .fp-b-converti { background: var(--fp-teal-l); color: var(--fp-teal); } #pg-facturation .fp-b-converti::before { background: var(--fp-teal); } #pg-facturation .fp-form-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; } #pg-facturation .fp-form-card { background: #fff; border: 1px solid var(--fp-g200); border-radius: 14px; padding: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 1rem; } #pg-facturation .fp-form-card-title { font-size: 14px; font-weight: 700; margin-bottom: 1.1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--fp-g100); display: flex; align-items: center; gap: 8px; } #pg-facturation .fp-field { margin-bottom: .875rem; } #pg-facturation .fp-field:last-child { margin-bottom: 0; } #pg-facturation .fp-field-row { display: grid; gap: 10px; } #pg-facturation .fp-field-row.fp-col2 { grid-template-columns: 1fr 1fr; } #pg-facturation .fp-field-row.fp-col3 { grid-template-columns: 1fr 1fr 1fr; } #pg-facturation label { display: block; font-size: 14px; font-weight: 700; color: var(--fp-g500); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } #pg-facturation input[type=text], #pg-facturation input[type=email], #pg-facturation input[type=tel], #pg-facturation input[type=number], #pg-facturation input[type=date], #pg-facturation select, #pg-facturation textarea { width: 100%; border: 1.5px solid var(--fp-g200); border-radius: 8px; padding: 8px 11px; font-size: 13px; outline: none; background: #fff; transition: border .15s; color: var(--fp-g800); } #pg-facturation input:focus, #pg-facturation select:focus, #pg-facturation textarea:focus { border-color: var(--fp-orange); } #pg-facturation textarea { resize: vertical; min-height: 70px; } #pg-facturation select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } #pg-facturation .fp-lines-tbl { width: 100%; border-collapse: collapse; } #pg-facturation .fp-lines-tbl th { font-size: 14px; font-weight: 700; color: var(--fp-g400); text-transform: uppercase; letter-spacing: .07em; padding: 6px 7px; text-align: left; border-bottom: 1.5px solid var(--fp-g200); } #pg-facturation .fp-lines-tbl td { padding: 5px 7px; vertical-align: top; } #pg-facturation .fp-lines-tbl tr:not(.fp-lines-foot) td { border-bottom: 1px solid var(--fp-g50); } #pg-facturation .fp-li { border: 1.5px solid var(--fp-g200); border-radius: 6px; padding: 6px 9px; font-size: 13px; outline: none; width: 100%; background: #fff; transition: border .15s; } #pg-facturation .fp-li:focus { border-color: var(--fp-orange); } #pg-facturation .fp-li-num { width: 72px; text-align: right; } #pg-facturation .fp-li-sel { width: 72px; padding: 6px 5px; appearance: none; } #pg-facturation .fp-rm-line { background: none; border: none; color: var(--fp-g300); font-size: 17px; padding: 5px; cursor: pointer; border-radius: 5px; display: flex; align-items: center; transition: all .15s; } #pg-facturation .fp-rm-line:hover { color: var(--fp-red); background: var(--fp-red-l); } #pg-facturation .fp-lines-foot td { padding: 8px 7px; font-size: 13px; border-top: 1.5px solid var(--fp-g200); background: var(--fp-g50); } #pg-facturation .fp-ft-lbl { text-align: right; color: var(--fp-g500); } #pg-facturation .fp-ft-val { text-align: right; font-weight: 700; min-width: 90px; } #pg-facturation .fp-ft-ttc-lbl { text-align: right; font-weight: 700; font-size: 14px; } #pg-facturation .fp-ft-ttc-val { text-align: right; font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 900; color: var(--fp-orange); min-width: 90px; } #pg-facturation .fp-totals-block { background: var(--fp-g50); border-radius: 9px; padding: .875rem; margin-top: .875rem; } #pg-facturation .fp-totals-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--fp-g600); } #pg-facturation .fp-totals-row.fp-ttc { border-top: 1.5px solid var(--fp-g300); margin-top: 5px; padding-top: 9px; font-weight: 900; font-size: 16px; color: var(--fp-g800); } #pg-facturation .fp-totals-amount { font-family: 'DM Sans', sans-serif; color: var(--fp-orange); } #pg-facturation .fp-client-card { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--fp-g200); border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: all .15s; margin-bottom: 6px; } #pg-facturation .fp-client-card:hover { border-color: var(--fp-orange); background: var(--fp-orange-l); } #pg-facturation .fp-client-card.fp-selected { border-color: var(--fp-orange); background: var(--fp-orange-l); } #pg-facturation .fp-cs-av { width: 34px; height: 34px; border-radius: 50%; background: var(--fp-navy); color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #pg-facturation .fp-cs-name { font-size: 13px; font-weight: 700; } #pg-facturation .fp-cs-meta { font-size: 13px; color: var(--fp-g400); } #pg-facturation .fp-cs-radio { margin-left: auto; width: 16px; height: 16px; accent-color: var(--fp-orange); } #pg-facturation .fp-status-sel { display: flex; gap: 5px; flex-wrap: wrap; } #pg-facturation .fp-s-opt { border: 1.5px solid var(--fp-g200); border-radius: 100px; padding: 5px 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; color: var(--fp-g500); background: #fff; } #pg-facturation .fp-s-opt.fp-s-brouillon.fp-s-active { background: var(--fp-g100); border-color: var(--fp-g400); color: var(--fp-g700); } #pg-facturation .fp-s-opt.fp-s-envoye.fp-s-active { background: var(--fp-blue-l); border-color: var(--fp-blue); color: var(--fp-blue); } #pg-facturation .fp-s-opt.fp-s-paye.fp-s-active { background: var(--fp-green-l); border-color: var(--fp-green); color: var(--fp-green); } #pg-facturation .fp-s-opt.fp-s-refuse.fp-s-active { background: var(--fp-red-l); border-color: var(--fp-red); color: var(--fp-red); } #pg-facturation .fp-logo-upload { border: 2px dashed var(--fp-g300); border-radius: 9px; padding: 1rem; text-align: center; cursor: pointer; transition: all .15s; } #pg-facturation .fp-logo-upload:hover { border-color: var(--fp-orange); background: var(--fp-orange-l); } #pg-facturation .fp-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } #pg-facturation .fp-activity-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--fp-g50); } #pg-facturation .fp-activity-item:last-child { border-bottom: none; } #pg-facturation .fp-activity-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } #pg-facturation .fp-activity-title { font-size: 13px; font-weight: 600; color: var(--fp-g800); } #pg-facturation .fp-activity-meta { font-size: 13px; color: var(--fp-g400); margin-top: 2px; } #pg-facturation .fp-activity-amount { font-size: 13px; font-weight: 700; font-family: 'DM Sans', sans-serif; color: var(--fp-orange); margin-left: auto; flex-shrink: 0; } #pg-facturation .fp-modal-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 1rem; } #pg-facturation .fp-modal-backdrop.fp-open { display: flex; } #pg-facturation .fp-modal { background: #fff; border-radius: 16px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.2); max-height: 90vh; display: flex; flex-direction: column; animation: fpModalIn .2s ease; } @keyframes fpModalIn { from { opacity:0; transform:scale(.96) translateY(-8px); } to { opacity:1; transform:scale(1) translateY(0); } } #pg-facturation .fp-modal-sm { max-width: 440px; } #pg-facturation .fp-modal-md { max-width: 580px; } #pg-facturation .fp-modal-xl { max-width: 820px; } #pg-facturation .fp-modal-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--fp-g100); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #pg-facturation .fp-modal-title { font-size: 16px; font-weight: 900; font-family: 'DM Sans', sans-serif; } #pg-facturation .fp-modal-close { background: var(--fp-g100); border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--fp-g600); transition: all .15s; } #pg-facturation .fp-modal-close:hover { background: var(--fp-g200); } #pg-facturation .fp-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; } #pg-facturation .fp-modal-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--fp-g100); display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-shrink: 0; } #pg-facturation .fp-setup-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(15,15,35,.97); display: none; align-items: center; justify-content: center; padding: 1rem; } #pg-facturation .fp-setup-card { background: #fff; border-radius: 18px; padding: 2.25rem; width: 100%; max-width: 520px; box-shadow: 0 40px 80px rgba(0,0,0,.5); max-height: 90vh; overflow-y: auto; } #pg-facturation .fp-setup-logo { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 900; margin-bottom: .25rem; } #pg-facturation .fp-setup-logo span { color: var(--fp-orange); } #pg-facturation .fp-setup-sub { font-size: 13px; color: var(--fp-g400); margin-bottom: 1.5rem; } #pg-facturation .fp-preview-doc { background: #fff; max-width: 700px; margin: 0 auto; padding: 36px 44px; border: 1px solid var(--fp-g200); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.08); font-size: 13px; line-height: 1.6; } #pg-facturation .fp-preview-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; } #pg-facturation .fp-preview-company { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 900; color: var(--fp-navy); } #pg-facturation .fp-preview-artisan-info { font-size: 12px; color: var(--fp-g500); margin-top: 5px; line-height: 1.7; } #pg-facturation .fp-preview-doc-type { font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 900; color: var(--fp-orange); text-transform: uppercase; letter-spacing: .05em; text-align: right; } #pg-facturation .fp-preview-doc-num { font-size: 13px; color: var(--fp-g600); text-align: right; margin-top: 3px; } #pg-facturation .fp-preview-dates { font-size: 11px; color: var(--fp-g500); text-align: right; margin-top: 3px; line-height: 1.7; } #pg-facturation .fp-preview-addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 24px; padding: 16px; background: var(--fp-g50); border-radius: 9px; } #pg-facturation .fp-preview-addr-label { font-size: 9px; font-weight: 700; color: var(--fp-g400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; } #pg-facturation .fp-preview-addr-name { font-weight: 700; font-size: 13px; } #pg-facturation .fp-preview-addr-detail { font-size: 11px; color: var(--fp-g600); line-height: 1.7; } #pg-facturation .fp-preview-lines { width: 100%; border-collapse: collapse; margin-bottom: 16px; } #pg-facturation .fp-preview-lines th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fp-g400); padding: 7px 9px; text-align: left; border-bottom: 2px solid var(--fp-g200); } #pg-facturation .fp-preview-lines th:not(:first-child) { text-align: right; } #pg-facturation .fp-preview-lines td { padding: 9px 9px; border-bottom: 1px solid var(--fp-g100); font-size: 12px; } #pg-facturation .fp-preview-lines td:not(:first-child) { text-align: right; } #pg-facturation .fp-preview-totals { margin-left: auto; width: 240px; margin-bottom: 24px; } #pg-facturation .fp-preview-totals-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; color: var(--fp-g600); } #pg-facturation .fp-preview-totals-row.fp-ttc { border-top: 2px solid var(--fp-g200); margin-top: 7px; padding-top: 9px; font-weight: 900; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--fp-g800); } #pg-facturation .fp-preview-amount { color: var(--fp-orange) !important; } #pg-facturation .fp-preview-notes { background: var(--fp-orange-l); border-left: 3px solid var(--fp-orange); border-radius: 0 7px 7px 0; padding: 10px 12px; font-size: 11px; color: var(--fp-g700); margin-bottom: 16px; } #pg-facturation .fp-preview-mentions { border-top: 1px solid var(--fp-g200); padding-top: 16px; font-size: 10px; color: var(--fp-g400); line-height: 1.8; } #pg-facturation .fp-preview-mentions strong { color: var(--fp-g600); } #fp-toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 7px; pointer-events: none; } .fp-toast { background: var(--navy, #0f0f23); color: #fff; border-radius: 10px; padding: 11px 18px; font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; box-shadow: 0 8px 32px rgba(0,0,0,.2); display: flex; align-items: center; gap: 9px; animation: fpToastIn .3s ease; pointer-events: auto; } .fp-toast.success { background: #16a34a; } .fp-toast.error { background: #dc2626; } .fp-toast.info { background: #2563eb; } @keyframes fpToastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @media (max-width: 900px) { #pg-facturation .fp-sidebar { display: none; } #pg-facturation .fp-kpi-grid { grid-template-columns: 1fr 1fr; } #pg-facturation .fp-form-grid { grid-template-columns: 1fr; } #pg-facturation .fp-dash-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { #pg-facturation .fp-content { padding: 1rem; } #pg-facturation .fp-kpi-grid { grid-template-columns: 1fr 1fr; } #pg-facturation .fp-preview-addrs { grid-template-columns: 1fr; } #pg-facturation .fp-preview-doc { padding: 20px; } } /* ═══════════════════════════════════════════════════════════════════ FACTURE (.fx) — gabarit sobre et administratif, distinct du devis. Le devis conserve son rendu d'origine en styles inline : rien ici ne peut l'atteindre, toutes les regles sont prefixees .fx. ═══════════════════════════════════════════════════════════════════ */ .fx { /* Inter si l'utilisateur l'a localement, sinon Segoe UI sous Windows. Aucune police n'est telechargee : pas de dependance nouvelle. */ font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 12.5px; line-height: 1.55; color: #1f2937; background: #fff; max-width: 186mm; /* A4 moins les marges de 12 mm */ margin: 0 auto; padding: 0; -webkit-font-smoothing: antialiased; } .fx * { box-sizing: border-box; } /* ── Avertissement brouillon (jamais imprime) ── */ .fx-alerte { background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #FF6B35; border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; font-size: 12px; color: #7c2d12; } .fx-alerte ul { margin: 6px 0 0 18px; padding: 0; } .fx-alerte li { margin: 2px 0; } /* ── En-tete : blanc, lisere orange a gauche, titre a droite ── */ .fx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 4px 0 18px; border-bottom: 2px solid #0f0f23; } .fx-emetteur { border-left: 3px solid #FF6B35; padding-left: 14px; max-width: 58%; } .fx-logo { max-height: 34px; max-width: 120px; object-fit: contain; display: block; margin-bottom: 8px; } .fx-emetteur-nom { font-size: 15px; font-weight: 700; color: #0f0f23; letter-spacing: -.01em; margin-bottom: 3px; } .fx-emetteur-det { font-size: 11px; color: #6b7280; line-height: 1.75; } .fx-ident { text-align: right; flex-shrink: 0; } .fx-titre { font-size: 27px; font-weight: 700; color: #0f0f23; letter-spacing: .06em; line-height: 1; } .fx-num { font-size: 13px; font-weight: 600; color: #4b5563; margin-top: 5px; letter-spacing: .02em; } .fx-badge { display: inline-block; margin-top: 9px; padding: 4px 12px; border: 1px solid; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; } /* ── Bandeau des quatre dates ── */ .fx-dates { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #e5e7eb; border-top: none; background: #fafafa; } .fx-dates > div { padding: 9px 12px; border-right: 1px solid #e5e7eb; } .fx-dates > div:last-child { border-right: none; } .fx-dates span { display: block; font-size: 8.5px; font-weight: 700; color: #9ca3af; letter-spacing: .09em; margin-bottom: 3px; } .fx-dates b { font-size: 12.5px; font-weight: 600; color: #1f2937; } .fx-vert { color: #15803d !important; } /* ── Deux cartes : prestataire / client ── */ .fx-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .fx-carte { background: #fcfcfd; border: 1px solid #e5e7eb; border-radius: 6px; padding: 13px 15px; } .fx-carte-t { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #e5e7eb; } .fx-t-orange { color: #c2410c; } .fx-t-teal { color: #0d9488; } .fx-carte-nom { font-size: 13.5px; font-weight: 700; color: #0f0f23; margin-bottom: 4px; } .fx-carte-det { font-size: 11px; color: #6b7280; line-height: 1.8; } /* ── Tableau des prestations ── */ .fx-table { width: 100%; border-collapse: collapse; margin-top: 18px; } .fx-table thead th { background: #0f0f23; color: #fff; padding: 9px 10px; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; border-right: 1px solid rgba(255,255,255,.12); } .fx-table thead th:last-child { border-right: none; } .fx-th-ttc { color: #FF6B35 !important; } .fx-table tbody td { padding: 10px; border-bottom: 1px solid #f1f2f4; vertical-align: top; } .fx-alt td { background: #fafafa; } .fx-desig { font-weight: 500; color: #1f2937; } .fx-l { text-align: left; } .fx-c { text-align: center; } .fx-r { text-align: right; white-space: nowrap; } /* jamais "246,00" coupe de "€" */ .fx-mut { color: #6b7280; } .fx-ttc { font-weight: 700; color: #0f0f23; } /* ── Synthese financiere, alignee a droite ── */ .fx-synthese { display: flex; justify-content: flex-end; margin-top: 14px; } .fx-totaux { width: 268px; } .fx-tot-l { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: 11.5px; color: #6b7280; border-bottom: 1px solid #f1f2f4; } .fx-tot-l span:last-child { color: #374151; font-weight: 600; white-space: nowrap; } .fx-tot-ttc { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #0f0f23; padding: 11px 12px; margin-top: 2px; } .fx-tot-ttc span:first-child { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .06em; } .fx-tot-ttc span:last-child { font-size: 17px; font-weight: 700; color: #FF6B35; white-space: nowrap; } .fx-tot-reste { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; border-top: none; color: #374151; } .fx-tot-reste span:last-child { white-space: nowrap; } .fx-reste-ok { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; } /* ── Coordonnees bancaires / observations, meme hauteur ── */ .fx-blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; align-items: stretch; } .fx-bloc { background: #fcfcfd; border: 1px solid #e5e7eb; border-radius: 6px; padding: 13px 15px; } .fx-bloc-t { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: #0f0f23; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #e5e7eb; } .fx-bloc dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 11px; } .fx-bloc dt { color: #9ca3af; white-space: nowrap; } .fx-bloc dd { margin: 0; color: #374151; font-weight: 500; word-break: break-all; } .fx-manque { color: #b91c1c; font-style: italic; font-weight: 400; } .fx-obs { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #f1f2f4; font-size: 11px; color: #4b5563; line-height: 1.7; } /* ── Mentions legales, discretes ── */ .fx-legal { background: #f6f7f8; border: 1px solid #e5e7eb; border-radius: 6px; padding: 11px 15px; margin-top: 16px; } .fx-legal-t { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: #9ca3af; margin-bottom: 5px; } .fx-legal p { margin: 0; font-size: 9.5px; color: #9ca3af; line-height: 1.75; } /* ── Pied de page fin ── */ .fx-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 9px; border-top: 1.5px solid #0f0f23; font-size: 9.5px; color: #4b5563; } .fx-pied b { color: #FF6B35; } /* ── Petits ecrans : les cartes passent l'une sous l'autre ── */ @media screen and (max-width: 640px) { .fx-head { flex-direction: column; gap: 14px; } .fx-ident { text-align: left; } .fx-emetteur{ max-width: 100%; } .fx-dates { grid-template-columns: 1fr 1fr; } .fx-dates > div:nth-child(2) { border-right: none; } .fx-dates > div:nth-child(-n+2) { border-bottom: 1px solid #e5e7eb; } .fx-parties, .fx-blocs { grid-template-columns: 1fr; } .fx-synthese { justify-content: stretch; } .fx-totaux { width: 100%; } .fx-table { font-size: 11px; } } /* ═══ IMPRESSION / PDF NAVIGATEUR ═══ */ @page { size: A4; margin: 12mm; } @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Aucun bouton, menu ni avertissement d'ecran sur le papier. */ .fx-nopr, .fp-modal-actions, .fp-btn, button, nav, .fp-sidebar { display: none !important; } .fx { max-width: 100%; font-size: 10.5px; } .fx-titre { font-size: 24px; } /* Une ligne de prestation ne doit pas etre coupee en deux pages. */ .fx-table tr { page-break-inside: avoid; break-inside: avoid; } /* L'en-tete du tableau se repete sur chaque page (thead + table-header-group). */ .fx-table thead { display: table-header-group; } .fx-table tfoot { display: table-footer-group; } /* Les totaux ne doivent jamais se retrouver seuls, separes de leurs lignes. */ .fx-synthese, .fx-totaux, .fx-blocs, .fx-bloc, .fx-carte, .fx-legal, .fx-pied { page-break-inside: avoid; break-inside: avoid; } .fx-head { page-break-after: avoid; break-after: avoid; } /* Surtout PAS de hauteur fixe : une facture longue doit pouvoir s'etaler sur plusieurs pages sans etre tronquee. */ } /* ═══════════════════════════════════════════════════════════════════ SÉLECTEUR DE CLIENT — défilement propre à la liste Utilisé par le MÊME formulaire pour les devis et les factures (fpOpenNewDoc(type) : un seul #fpClientList). Trois zones dans .dash-panel, et seule celle du milieu défile : 1. .dp-head titre « Client » — fixe 2. #fpClientList la liste — DÉFILE 3. bouton d'ajout — fixe ═══════════════════════════════════════════════════════════════════ */ #pg-facturation .fp-client-scroll { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; /* Le conteneur devient l'offsetParent des cartes : leur offsetTop est alors mesure PAR RAPPORT A LUI, ce qui rend le calcul de defilement fiable quel que soit l'ancetre positionne au-dessus. */ position: relative; /* Repli si le JavaScript n'a pas encore mesure : trois cartes plus les deux espacements. La valeur DEFINITIVE est posee par fpAjusterHauteurListe(), qui mesure le bas de la 3e carte reelle — seule facon de garantir qu'aucune carte ne soit coupee quels que soient la police installee, le zoom ou la longueur du nom. */ max-height: 187px; overflow-y: auto; overflow-x: hidden; /* jamais de barre horizontale */ /* La molette ne « traverse » pas vers la page tant que la liste peut encore defiler. C'est ce qui evite de faire sauter toute la page quand on parcourt les clients. */ overscroll-behavior: contain; /* Reserve la gouttiere : la largeur du contenu ne bouge pas selon qu'une barre apparaisse ou non. Ignore par les navigateurs qui ne le connaissent pas — le padding ci-dessous suffit alors. */ scrollbar-gutter: stable; padding-right: 6px; /* Firefox */ scrollbar-width: thin; scrollbar-color: var(--fp-navy) #eef0f4; } /* Dans la liste, l'espacement vient du `gap` du conteneur. La `margin-bottom` de .fp-client-card s'y ajoutait, ce qui donnait un espacement de 14px au lieu de 8px et rendait la hauteur totale imprevisible. On la neutralise ici, et seulement ici : la carte garde sa marge partout ailleurs. */ #pg-facturation .fp-client-scroll .fp-client-card { margin-bottom: 0; } /* Le focus clavier doit se voir : la zone est atteignable au Tab. */ #pg-facturation .fp-client-scroll:focus-visible { outline: 2px solid var(--fp-orange); outline-offset: 2px; border-radius: 6px; } /* WebKit / Blink — barre discrete, jamais une grosse barre noire. */ #pg-facturation .fp-client-scroll::-webkit-scrollbar { width: 8px; } #pg-facturation .fp-client-scroll::-webkit-scrollbar-track { background: #eef0f4; border-radius: 999px; box-shadow: inset 0 0 0 1px #e2e6ec; /* le rail se distingue du fond */ } #pg-facturation .fp-client-scroll::-webkit-scrollbar-thumb { background: var(--fp-navy); border-radius: 999px; /* 1px et non 2 : le curseur occupe 6px des 8px du rail. Il reste fin mais se voit franchement — a 2px il devenait trop discret pour signaler qu'il y a une suite. */ border: 1px solid #eef0f4; min-height: 28px; /* jamais reduit a un point sur une longue liste */ } #pg-facturation .fp-client-scroll::-webkit-scrollbar-thumb:hover { background: var(--fp-orange); } #pg-facturation .fp-client-scroll::-webkit-scrollbar-thumb:active { background: var(--fp-teal); } /* Indication du reste : discrete, sous la liste, avant le bouton. Elle ne contient qu'un NOMBRE — jamais un nom ni un email. */ #pg-facturation .fp-client-reste { display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; font-size: 11.5px; color: var(--fp-g500); user-select: none; } #pg-facturation .fp-client-reste::before { content: '\2193'; /* fleche vers le bas */ font-size: 12px; color: var(--fp-orange); line-height: 1; } #pg-facturation .fp-client-reste[hidden] { display: none; } /* Aucune barre tant que la liste tient dans la hauteur : `overflow: auto` s'en charge seul, il n'y a rien a masquer. En dessous de quatre clients le contenu tient, donc aucune barre n'apparait. */ /* Sur petit ecran, on laisse un peu plus de hauteur : le panneau n'est plus en colonne laterale et l'espace vertical est moins compte. */ @media screen and (max-width: 768px) { /* Repli mobile uniquement : la mesure JavaScript s'applique de la meme facon, trois cartes completes. */ #pg-facturation .fp-client-scroll { max-height: 187px; } } /* ── Les quatre indicateurs sur une seule ligne ── .kpi-row est defini dans css/dashboard-client.css SANS prefixe : c'est une classe globale, partagee avec le tableau de bord client. Celui-ci compte exactement TROIS indicateurs, d'ou son `repeat(3,1fr)`. Le tableau de bord artisan en a QUATRE : le quatrieme, « Clients », passait donc seul a la ligne suivante. La regle ci-dessous est prefixee par #pg-facturation : le tableau de bord client garde ses trois colonnes, il n'est pas touche. minmax(0,1fr) et non 1fr : sans cela un montant long comme « 128 450,00 € » impose sa largeur a sa colonne et les quatre cartes cessent d'etre egales. La hauteur, elle, s'egalise toute seule : les elements d'une meme ligne de grille s'etirent par defaut. */ #pg-facturation .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } /* ── LA VRAIE CAUSE DE L'ESPACE VIDE A DROITE ── js/facturation.js met `#fpApp.style.display = 'flex'` (heritage de l'ancienne page FacturePro autonome, qui avait sa propre barre laterale a cote du contenu). Son unique enfant est donc un ELEMENT FLEX, et un element flex vaut `flex: 0 1 auto` par defaut : il se dimensionne sur son CONTENU, pas sur la largeur disponible. Resultat : tout le tableau de bord se retrecissait a environ 1080px quelle que soit la taille de l'ecran, et le reste restait blanc. Les quatre cartes se serraient dans cette largeur au lieu de respirer. `flex: 1` lui dit d'occuper la place libre. `min-width: 0` evite qu'un montant long ne l'elargisse au-dela du conteneur. */ #pg-facturation #fpApp > div { flex: 1 1 auto; min-width: 0; } /* Les cartes ont maintenant la place : on leur donne un peu d'air et on remonte legerement les chiffres, qui paraissaient petits dans l'ancien cadre etriqué. */ #pg-facturation .kpi-card { padding: 1.35rem 1.5rem; } #pg-facturation .kpi-value { font-size: 30px; line-height: 1.1; } #pg-facturation .kpi-label { font-size: 12px; letter-spacing: .04em; } #pg-facturation .dash-2col { gap: 16px; } /* En dessous, quatre cartes deviendraient illisibles. Les seuils portent sur la largeur de la fenetre, barre laterale de 230px comprise. */ @media (max-width: 1400px) { #pg-facturation .kpi-value { font-size: 26px; } } @media (max-width: 1180px) { #pg-facturation .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #pg-facturation .kpi-row { grid-template-columns: minmax(0, 1fr); } } /* ── « Envoyer au client » : l'acte qui engage, distinct du brouillon ── */ #pg-facturation .fp-btn-envoyer { background: var(--navy); color: #fff; font-weight: 700; } #pg-facturation .fp-btn-envoyer:hover { background: #1f2a5a; } #pg-facturation .fp-btn-envoyer[hidden] { display: none; } #pg-facturation .fp-btn-envoyer:disabled { opacity: .6; cursor: default; } #pg-facturation .fp-envoi-etat { font-size: 13px; color: var(--gray-600); } #pg-facturation .fp-envoi-etat.echec { color: #b91c1c; } /* Etats de remise (mission 9) */ #pg-facturation .fp-b-emis { background: #e0e7ff; color: #3730a3; } #pg-facturation .fp-b-emis::before { background: #4f46e5; } #pg-facturation .fp-b-envoi_echec { background: #fee2e2; color: #b91c1c; } #pg-facturation .fp-b-envoi_echec::before { background: #dc2626; } .fp-lien { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--fp-teal, #0d9488); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .fp-lien:focus-visible { outline: 2px solid var(--orange, #FF6B35); outline-offset: 2px; border-radius: 3px; } /* ── Acces d'emission (Mission 10, lot 1) : bandeau et bouton grise ── */ /* ── LE BANDEAU « ABONNEMENT REQUIS » (mission 11, lot 1) ── La cause de l'ancien « encart qui prenait la moitie de la page » : #fpApp est en display:flex (ligne) et « #fpApp > div { flex: 1 1 auto } » s'appliquait AUSSI au bandeau, qui devenait une colonne de gauche. On empile donc en colonne, et le bandeau garde sa hauteur naturelle. Ensuite, une information permanente n'est pas une alerte : fond blanc, bordure neutre, l'orange n'est qu'un accent (filet gauche + icone), texte a gauche, bouton compact a droite ; sur mobile, empilement. */ #pg-facturation #fpApp { flex-direction: column; } #pg-facturation #fpApp > .fp-acces-bandeau { flex: 0 0 auto; } #pg-facturation .fp-acces-bandeau { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--gray-200); border-left: 3px solid var(--orange); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; color: var(--navy); } #pg-facturation .fp-acces-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; } #pg-facturation .fp-acces-titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.4; } #pg-facturation .fp-acces-bandeau .ic { flex: none; width: 16px; height: 16px; color: var(--orange); } #pg-facturation .fp-acces-texte span { font-size: 13px; line-height: 1.5; color: var(--gray-600, #4b5563); } #pg-facturation .fp-acces-action { flex: none; background: var(--orange); color: #fff; font-weight: 700; white-space: nowrap; } #pg-facturation .fp-acces-action:hover { background: #e8541e; } #pg-facturation .fp-acces-action:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } @media (max-width: 640px) { #pg-facturation .fp-acces-bandeau { flex-direction: column; align-items: stretch; gap: 10px; } #pg-facturation .fp-acces-action { width: 100%; white-space: normal; } } #pg-facturation .fp-btn[disabled], #pg-facturation .fp-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } #pg-facturation .fp-btn-envoyer[disabled] { background: #6b7280; } /* ── Fiches clients distinguables (Mission 10, lot 3) ── */ #pg-facturation .fp-cs-lie { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--fp-teal, #0f766e); background: var(--fp-teal-l, #ccfbf1); border-radius: 100px; padding: 1px 8px; vertical-align: middle; } /* ── ENREGISTRER UN REGLEMENT (mission 11, lot 3) ── */ #pg-facturation .fp-reg-backdrop { position: fixed; inset: 0; background: rgba(15,15,35,.5); z-index: 600; align-items: center; justify-content: center; } #pg-facturation .fp-reg-modale { background: #fff; border-radius: 16px; max-width: 460px; width: 100%; padding: 1.5rem; margin: 1rem; } #pg-facturation .fp-reg-titre { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 4px; } #pg-facturation .fp-reg-sous { font-size: 13px; color: var(--gray-500); margin: 0 0 14px; } #pg-facturation .fp-reg-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #pg-facturation .fp-reg-grille > div:nth-child(4) { grid-column: 1 / -1; } #pg-facturation .fp-reg-label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-500); margin-bottom: 4px; } #pg-facturation .fp-reg-champ { width: 100%; border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--navy); background: #fff; } #pg-facturation .fp-reg-champ:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; } #pg-facturation .fp-reg-erreur { min-height: 0; margin-top: 8px; font-size: 13px; color: #b91c1c; } #pg-facturation .fp-reg-erreur:empty { display: none; } #pg-facturation .fp-reg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.25rem; } #pg-facturation .fp-reg-annuler { background: #f7f8fa; color: var(--navy); border: 1.5px solid var(--gray-200); } #pg-facturation .fp-reg-valider { background: var(--orange); color: #fff; border: none; font-weight: 700; } #pg-facturation .fp-reg-valider:disabled { opacity: .6; cursor: default; } #pg-facturation .fp-btn-reglement { background: var(--fp-green-l); color: var(--fp-green); border: none; font-weight: 700; white-space: nowrap; } #pg-facturation .fp-b-emise, #pg-facturation .fp-b-envoyee { background: var(--fp-blue-l, #dbeafe); color: var(--fp-blue, #1d4ed8); } #pg-facturation .fp-b-partiellement_payee { background: #fef9c3; color: #a16207; } #pg-facturation .fp-b-payee { background: #dcfce7; color: #15803d; } #pg-facturation .fp-b-en_retard { background: #fee2e2; color: #b91c1c; } #pg-facturation .fp-b-annulee_par_avoir { background: var(--fp-g100, #f3f4f6); color: var(--fp-g500, #6b7280); } #pg-facturation .fp-solde { display: block; font-size: 13px; color: var(--fp-g500, #6b7280); } @media (max-width: 640px) { #pg-facturation .fp-reg-grille { grid-template-columns: 1fr; } }