@font-face { font-family: Manrope; src: url('./vendor/manrope-regular.woff2') format('woff2'), url('./vendor/manrope-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('./vendor/manrope-semibold.woff2') format('woff2'), url('./vendor/manrope-semibold.ttf') format('truetype'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('./vendor/instrument-serif.woff2') format('woff2'), url('./vendor/instrument-serif.ttf') format('truetype'); font-weight: 400; font-display: swap; }

/* Brand and shared navigation. */
html body, html body button, html body input, html body select, html body textarea { font-family: Manrope, sans-serif; letter-spacing: 0; }
html body .paola-signature { display: flex; align-items: center; gap: 10px; color: #29242c; }
html body .paola-signature img { display: block; width: 34px; height: 44px; flex-shrink: 0; }
html body .signature-copy { display: flex; flex-direction: column; gap: 6px; }
html body .signature-copy strong { font: 600 19px/1 Manrope, sans-serif; letter-spacing: 0; }
html body .signature-copy small { color: #766a74; font: 400 9px/1 Manrope, sans-serif; letter-spacing: 0; }
html body .app-brand { padding: 0 8px 34px; }
html body .mobile-signature { display: none; }
html body .auth-signature { margin-bottom: 38px; }
html body .auth-signature img { width: 45px; height: 60px; }
html body .auth-signature .signature-copy strong { font-size: 26px; }
html body .auth-signature .signature-copy small { font-size: 11px; }
html body .lucide { width: 18px; height: 18px; flex-shrink: 0; }
html body.is-authenticated .app-sidebar { padding-top: 30px; background: #f9f8fa !important; border-color: #eae6ea; }
html body.is-authenticated .app-sidebar .tab-button,
html body.is-authenticated .app-sidebar .app-nav-group summary { min-height: 42px; justify-content: flex-start !important; padding: 10px 12px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #6f626e !important; box-shadow: none !important; font-size: 12px !important; font-weight: 400 !important; transition: background 160ms, color 160ms; }
html body.is-authenticated .app-sidebar .tab-button:hover { background: #efeaef !important; color: #332532 !important; }
html body.is-authenticated .app-sidebar .tabs-bar .tab-button.is-active { background: #f4e2ea !important; color: #a5214c !important; font-weight: 600 !important; }
html body.is-authenticated .app-sidebar .app-nav-submenu { margin-left: 20px; padding-left: 8px; border-left: 1px solid #e4dce4; }
html body.is-authenticated .app-sidebar .app-nav-submenu .tab-button { min-height: 36px; padding: 8px 4px !important; font-size: 11px !important; }
html body.is-authenticated .app-topbar { background: #fff !important; border-bottom: 1px solid #eee9ee; }
html body.is-authenticated .assistant-toggle { display: flex; align-items: center; gap: 7px; border: 1px solid #e7dce4 !important; border-radius: 5px !important; background: #fff !important; color: #703850 !important; font-size: 12px; }
html body .assistant-toggle .lucide { width: 15px; }
html body.is-authenticated .section-kicker { color: #7a6d78 !important; letter-spacing: 0 !important; }
html body.is-authenticated.is-dashboard .view-heading { margin: 0; padding: 0; min-height: 0; }
html body.is-authenticated.is-dashboard .view-heading > div, html body.is-authenticated.is-dashboard #status:empty { display: none; }
html body.is-authenticated.is-dashboard #app-shell > .workspace { padding: 0 40px 36px !important; background: #fff !important; }
html body.is-authenticated #app-shell #dashboard-view { padding: 0 !important; }
html body #dashboard-overview { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 1400px; margin-inline: auto; }
html body .dashboard-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 34px 0 28px; border-bottom: 1px solid #e5dfe5; }
html body .dashboard-eyebrow { margin: 0 0 9px; color: #796775; font-size: 10px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
html body.is-authenticated .dashboard-intro h1 { margin: 0 !important; max-width: none !important; color: #332730 !important; font: 400 42px/1 'Instrument Serif', serif !important; letter-spacing: 0 !important; }
html body .heading-period { color: #b62956; }
html body .dashboard-context { display: grid; grid-template-columns: 6px auto; align-items: center; gap: 7px; color: #66525f; font-size: 11px; }
html body .dashboard-context small { grid-column: 2; font-size: 11px; color: #8b7c87; }
html body .context-dot { width: 5px; height: 5px; background: #388467; border-radius: 50%; }

/* The financial view is one open composition, not a row of cards. */
html body .dashboard-financial { display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; padding: 34px 0; border-bottom: 1px solid #e5dfe5; }
html body.is-authenticated #dashboard-view .deals-dashboard-panel { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-panel > .section-heading { display: none !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid { display: grid !important; grid-template-columns: 1.7fr .9fr .9fr !important; gap: 0 !important; border: 0 !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid > .metric-card { position: relative; display: flex !important; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 0; gap: 0; margin: 0; padding: 0 13px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; transition: color 160ms; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid > .metric-card:hover { transform: none !important; box-shadow: none !important; background: transparent !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid > .overview-announced { grid-column: 1 / -1; padding: 0 0 26px !important; margin-bottom: 22px; border-bottom: 1px solid #e5dfe5 !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid > .overview-paid { padding-left: 0 !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid > .overview-count,
html body.is-authenticated #dashboard-view .deals-dashboard-grid > .overview-review { border-left: 1px solid #e5dfe5 !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-label { margin: 0 0 11px !important; padding: 0; color: #776273 !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-announced .metric-label { display: flex; align-items: center; gap: 9px; color: #903555 !important; font-size: 12px !important; }
html body .overview-announced .metric-label::before { content: ''; display: block; width: 16px; height: 2px; background: #b62956; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-value { display: block; width: auto !important; max-width: 100%; padding: 0 !important; margin: 0 0 10px !important; background: transparent !important; color: #392d38 !important; font: 600 24px/1.15 Manrope, sans-serif !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; white-space: nowrap !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-announced .metric-value { margin: 0 0 15px !important; color: #a52551 !important; font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; font-size: 68px !important; line-height: 1 !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-paid .metric-value { color: #29654d !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-count .metric-value,
html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-review .metric-value { font-size: 32px !important; line-height: .94 !important; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-foot { margin: 0; color: #8b7d86 !important; font-size: 10px !important; line-height: 1.5; }
html body .metric-symbol { display: none; }
html body .overview-announced .metric-symbol { position: absolute; right: 4px; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e7d4dd; border-radius: 50%; color: #b62956; transition: transform 180ms; }
html body .overview-announced:hover .metric-symbol { transform: translate(2px,-2px); }
html body .overview-announced .metric-symbol .lucide { width: 15px; height: 15px; }
html body .dashboard-activity { min-width: 0; padding-left: 32px; border-left: 1px solid #e5dfe5; }
html body .studio-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 23px; }
html body.is-authenticated .studio-section-heading h2 { margin: 0 !important; color: #392c36 !important; font: 400 25px/1.15 'Instrument Serif', serif !important; letter-spacing: 0 !important; }
html body .studio-section-heading .dashboard-eyebrow { margin-bottom: 7px; font-size: 9px; }
html body .chart-legend, html body .section-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #897783; }
html body .chart-legend > span { width: 5px; height: 5px; border-radius: 50%; background: #b62956; }
html body .dashboard-history { display: flex; gap: 10px; min-height: 189px; width: 100%; }
html body .history-axis { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; width: 40px; height: 130px; margin-top: 23px; font-size: 9px; color: #988795; }
html body .history-bars { display: flex; flex: 1; align-items: flex-end; gap: 12px; min-width: 0; background: repeating-linear-gradient(to top,transparent 0,transparent 42px,#efe9ee 42px,#efe9ee 43px) 0 23px / 100% 130px no-repeat; }
html body .history-column { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
html body .history-plot { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 153px; padding-top: 23px; }
html body .history-fill { position: relative; display: block; width: 100%; max-width: 36px; height: var(--bar-height); border-radius: 3px 3px 0 0; background: #dcb9c8; transform-origin: bottom; animation: paola-grow 750ms cubic-bezier(.22,1,.36,1) both; animation-delay: var(--bar-delay); transition: background 180ms; }
html body .history-column.is-latest .history-fill { background: #b62956; }
html body .history-column:hover .history-fill, html body .history-column:focus-visible .history-fill { background: #8c1c43; }
html body .history-value { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); color: #9e335a; font-size: 10px; white-space: nowrap; }
html body .history-column:not(.is-latest):not(.is-peak) .history-value { opacity: 0; transition: opacity 160ms; }
html body .history-column:hover .history-value, html body .history-column:focus-visible .history-value { opacity: 1; }
html body .history-column > strong { margin-top: 11px; color: #6a5866; font-size: 10px; font-weight: 400; }
html body .history-column > small { display: none; }

/* Two compact reading columns, with real control counts and ranked collaborations. */
html body .dashboard-story { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; padding: 30px 0 28px; border-bottom: 1px solid #e5dfe5; }
html body .dashboard-attention, html body .dashboard-brands { min-width: 0; }
html body .dashboard-brands { padding-left: 32px; border-left: 1px solid #e5dfe5; }
html body .attention-row { display: flex; width: 100%; align-items: center; gap: 18px; padding: 13px 0; border: 0; border-bottom: 1px solid #efe9ee; border-radius: 0; background: transparent; box-shadow: none; text-align: left; cursor: pointer; transition: padding 180ms; }
html body .attention-row:hover { padding-left: 7px; }
html body .attention-number { min-width: 47px; font: 600 27px/1 Manrope, sans-serif; }
html body .attention-number.amber { color: #94632e; }
html body .attention-number.raspberry { color: #a42b54; }
html body .attention-number.blue { color: #3b617b; }
html body .attention-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
html body .attention-copy strong { color: #4d3c49; font-size: 13px; font-weight: 600; }
html body .attention-copy small { color: #94838f; font-size: 10px; }
html body .attention-arrow { color: #b895a5; font-size: 19px; }
html body .attention-note { margin: 14px 0 0; color: #978791; font-size: 10px; }
html body .dashboard-brand-strip { display: grid; gap: 0; }
html body .studio-brand { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 12px; min-width: 0; position: relative; padding: 12px 0; border-bottom: 1px solid #efe9ee; }
html body .studio-brand::after { position: absolute; content: ''; left: 34px; bottom: -1px; height: 1px; width: var(--brand-share); max-width: calc(100% - 34px); background: #dcb5c6; }
html body .brand-rank { color: #b298a8; font-size: 10px; }
html body .studio-brand > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html body .studio-brand strong { font-size: 13px; font-weight: 600; color: #503b49; overflow-wrap: anywhere; }
html body .studio-brand div > span { font-size: 10px; color: #998792; }
html body .studio-brand p { color: #7e3550; font-size: 12px; font-weight: 600; white-space: nowrap; margin: 0; }
html body .dashboard-analysis-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; font-size: 11px; color: #8a7484; }
html body #dashboard-metrics-toggle { width: auto; border: 0 !important; border-radius: 0 !important; padding: 9px 0 9px 12px; background: transparent !important; color: #a32650 !important; box-shadow: none; font-size: 11px; }
html body #dashboard-metrics-toggle::after { content: '+'; padding-left: 12px; font-size: 17px; }
html body #dashboard-metrics-toggle[aria-expanded='true']::after { content: '−'; }
html body #dashboard-more-metrics { display: none; }
html body #dashboard-view.is-dashboard-expanded #dashboard-more-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding-bottom: 24px; }
html body #dashboard-more-metrics .metric-card { min-width: 0; padding: 18px !important; border: 1px solid #e7dfe7 !important; border-radius: 5px !important; background: #fff !important; box-shadow: none !important; }
html body #dashboard-more-metrics .metric-value { font-size: 21px !important; }
html body #dashboard-more-metrics .metric-foot { font-size: 11px !important; }
html body #dashboard-view.is-active .dashboard-intro,
html body #dashboard-view.is-active .dashboard-financial,
html body #dashboard-view.is-active .dashboard-story { animation: paola-arrive 600ms cubic-bezier(.22,1,.36,1) both; }
html body #dashboard-view.is-active .dashboard-financial { animation-delay: 80ms; }
html body #dashboard-view.is-active .dashboard-story { animation-delay: 160ms; }
@keyframes paola-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes paola-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

@media (min-width:768px) and (max-width:1023px) {
  html body .app-brand { justify-content: center; padding-inline: 0; }
  html body .app-sidebar .signature-copy { display: none; }
  html body .app-sidebar .paola-signature img { width: 28px; }
}
@media (max-width:1200px) {
  html body.is-authenticated.is-dashboard #app-shell > .workspace { padding-inline: 28px !important; }
  html body .dashboard-financial { grid-template-columns: 1fr; gap: 28px; }
  html body .dashboard-activity { padding: 25px 0 0; border-left: 0; border-top: 1px solid #e5dfe5; }
  html body .dashboard-story { gap: 28px; }
  html body .dashboard-brands { padding-left: 24px; }
  html body .history-fill { max-width: 44px; }
}
@media (max-width:767px) {
  html body.is-authenticated.is-dashboard #app-shell > .workspace { padding: 0 22px 85px !important; }
  html body .mobile-signature { display: flex; gap: 8px; }
  html body .mobile-signature img { width: 26px; height: 34px; }
  html body .mobile-signature .signature-copy strong { font-size: 16px; }
  html body .mobile-signature .signature-copy small { font-size: 8px; }
  html body.is-authenticated .app-topbar { display: flex !important; justify-content: space-between; min-height: 64px !important; padding-inline: 22px !important; }
  html body.is-authenticated .app-breadcrumb { display: none !important; }
  html body .dashboard-intro { padding: 24px 0 20px; }
  html body.is-authenticated .dashboard-intro h1 { font-size: 38px !important; }
  html body .dashboard-context { font-size: 10px; }
  html body .dashboard-context small { font-size: 9px; }
  html body .dashboard-eyebrow { font-size: 9px; }
  html body .dashboard-financial { padding: 26px 0; gap: 24px; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-announced .metric-value { font-size: 58px !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-value { font-size: 25px !important; }
  html body .dashboard-story { grid-template-columns: 1fr; gap: 28px; padding-top: 25px; }
  html body .dashboard-brands { padding: 26px 0 0; border-left: 0; border-top: 1px solid #e5dfe5; }
  html body .dashboard-analysis-heading > span { max-width: 135px; }
  html body #dashboard-view.is-dashboard-expanded #dashboard-more-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body #dashboard-more-metrics .metric-value { font-size: 17px !important; overflow-wrap: anywhere; }
  html body.is-authenticated #app-shell .mobile-primary-tab.is-active { background: transparent !important; }
  html body .mobile-primary-tab .lucide, html body #mobile-tab-trigger .lucide { width: 20px; height: 20px; }
}
@media (max-width:480px) {
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-announced .metric-value { font-size: 47px !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid > .metric-card { padding-inline: 10px !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid > .overview-announced,
  html body.is-authenticated #dashboard-view .deals-dashboard-grid > .overview-paid { padding-left: 0 !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-value { font-size: 17px !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-label { font-size: 10px !important; min-height: 30px; margin-bottom: 5px !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .overview-announced .metric-label { min-height: 0; margin-bottom: 15px !important; }
  html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-foot { font-size: 9px !important; }
  html body .chart-legend { display: none; }
  html body .history-bars { gap: 7px; }
  html body .history-axis { width: 32px; }
  html body .history-column:not(.is-latest) .history-value { display: none; }
  html body .history-column > strong { font-size: 9px; }
  html body .studio-section-heading h2 { font-size: 23px !important; }
}
@media (prefers-reduced-motion:reduce) {
  html body #dashboard-view *, html body .app-sidebar * { animation: none !important; transition: none !important; }
}

/* Shared finish: typography, surfaces, controls and document workspaces. */
html body.is-authenticated #app-shell > .workspace { background: #fff !important; padding: 28px 32px 36px !important; }
html body.is-authenticated #app-shell .tab-view { padding: 0 !important; }
html body.is-authenticated .view-heading { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #e5dfe5; }
html body.is-authenticated .view-heading h1 { font: 400 38px/1.1 'Instrument Serif', serif !important; color: #392c36 !important; }
html body.is-authenticated .view-summary { margin-top: 9px; color: #70616b; font-size: 13px; }
html body.is-authenticated.is-dashboard .view-heading { border: 0; margin: 0; padding: 0; }
html body.is-authenticated .workspace .section-heading h2 { font: 400 25px/1.15 'Instrument Serif', serif !important; color: #392c36 !important; }
html body.is-authenticated .workspace .section-heading h3,
html body.is-authenticated .workspace .detail-block h3 { font: 600 15px/1.4 Manrope, sans-serif !important; color: #493642 !important; }
html body.is-authenticated .workspace .metric-value { font-family: Manrope, sans-serif !important; font-variant-numeric: tabular-nums; }
html body.is-authenticated .eyebrow, html body.is-authenticated .section-kicker,
html body.is-authenticated .meta-label { color: #74616f !important; font: 600 11px/1.5 Manrope, sans-serif !important; letter-spacing: 0 !important; }
html body.is-authenticated .workspace > .tab-view > .panel,
html body.is-authenticated .workspace :is(.deals-main-panel,.deals-side-panel,.filters-panel,.library-panel,.details-panel,.invoices-main-panel,.invoices-side-panel,.accounting-main-panel,.accounting-side-panel,.duplicates-summary-panel,.duplicates-list-panel):not(.is-floating-open) { margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.is-authenticated .workspace :is(.deals-side-panel,.filters-panel,.invoices-side-panel,.accounting-side-panel) { padding-right: 20px !important; border-right: 1px solid #e5dfe5 !important; }
html body.is-authenticated .workspace .details-panel:not(.is-floating-open) { padding-left: 24px !important; border-left: 1px solid #e5dfe5 !important; }
html body.is-authenticated .content-grid { grid-template-columns: 200px minmax(290px,.9fr) minmax(340px,1.1fr); gap: 24px; }
html body.is-authenticated :is(.deals-grid,.invoices-grid,.accounting-grid) { grid-template-columns: 210px minmax(0,1fr); gap: 24px; }
html body.is-authenticated :is(.contracts-toolbar-shell,.invoice-toolbar) { padding: 12px 0 !important; border: 0 !important; border-block: 1px solid #e5dfe5 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; gap: 12px; }
html body.is-authenticated .contracts-toolbar-copy { gap: 4px; font-size: 12px; }
html body.is-authenticated .contracts-toolbar-copy > span { font-size: 12px; color: #77636f; }
html body .contracts-toolbar-shell :is([data-action='clear-contract-selection'],[data-action='download-selected-contracts'],[data-action='clear-invoice-selection'],[data-action='download-selected-invoices'],[data-action='delete-selected-invoices']):disabled { display: none; }
html body.is-authenticated :is(.primary-button,.secondary-button,.ghost-button,.danger-button,label.inline-file-button) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: 5px !important; box-shadow: none !important; font-family: Manrope, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4; transition: background 150ms,border-color 150ms,color 150ms; }
html body.is-authenticated .ghost-button { border-color: #d3c7d0 !important; color: #5c4051 !important; background: #fff !important; }
html body.is-authenticated .ghost-button:hover:not(:disabled) { border-color: #b97690 !important; background: #fcf3f7 !important; }
html body.is-authenticated :is(.secondary-button,.primary-button):hover:not(:disabled) { background: #932044 !important; }
html body.is-authenticated .danger-button { color: #a52222 !important; border-color: #e6c2c2 !important; background: #fff7f7 !important; }
html body.is-authenticated .icon-command { width: 38px; min-width: 38px; padding: 8px !important; }
html body.is-authenticated :is(input,select,textarea) { min-height: 40px; border: 1px solid #968692 !important; border-radius: 4px !important; background: #fff !important; color: #3b3039 !important; font-family: Manrope, sans-serif; font-size: 13px; box-shadow: none !important; }
html body.is-authenticated :is(input,select,textarea):focus { border-color: #b62956 !important; }
html body.is-authenticated :is(input,textarea)::placeholder { color: #81717c; }
html body.is-authenticated input[type='checkbox'], html body.is-authenticated input[type='radio'] { min-height: 16px; width: 16px; }
html body.is-authenticated .filters-stack label > span, html body.is-authenticated .editor-grid label > span,
html body.is-authenticated .detail-editor label > span { color: #66525f; font-size: 12px; }
html body.is-authenticated .upload-zone { min-height: 92px; padding: 16px 12px; border: 1px dashed #b590a3 !important; border-radius: 5px !important; background: #fcf7fa !important; box-shadow: none !important; }
html body.is-authenticated .upload-zone:hover { border-color: #b62956 !important; background: #f9eaf1 !important; }
html body.is-authenticated .upload-title { color: #842c4c; font-size: 13px; }
html body.is-authenticated .upload-caption { color: #75616e; font-size: 12px; }
html body.is-authenticated .table-shell { border: 0 !important; border-block: 1px solid #e5dfe5 !important; border-radius: 0 !important; }
html body.is-authenticated .stats-table th { background: #f8f5f8 !important; color: #70556a !important; font-size: 12px !important; font-weight: 600; }
html body.is-authenticated .stats-table td { background: #fff; border-color: #eee7ec; padding-block: 13px; font-size: 12px; }
html body.is-authenticated .stats-table tbody tr:hover td { background: #fbf6f9 !important; }
html body.is-authenticated .stats-table tr.is-selected-row td { background: #faeaf1 !important; }
html body.is-authenticated :is(.meta-pill,.tag,.status-pill,.review-pill,.accounting-status-pill,.results-count) { min-height: 24px; padding: 3px 7px; border: 0; border-radius: 3px !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.5; }
html body.is-authenticated :is(.meta-pill,.tag,.results-count) { color: #6f5365 !important; background: #f5eff3 !important; }
html body.is-authenticated .amount-pill { min-height: 0; padding: 0; border-radius: 0 !important; background: transparent !important; color: #8c3152 !important; font-size: 13px !important; font-weight: 600 !important; }
html body.is-authenticated .contracts-list, html body.is-authenticated .cards-stack { gap: 0; }
html body.is-authenticated .contract-card { padding: 17px 12px !important; border: 0 !important; border-bottom: 1px solid #e9e1e8 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
html body.is-authenticated .contract-card:hover { background: #fcf6f9 !important; }
html body.is-authenticated .contract-card.is-active { background: #fbf0f5 !important; box-shadow: inset 3px 0 #b62956 !important; }
.invoice-number-field { position: relative; }
.invoice-number-suggestions { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px)); max-height: 340px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; border: 1px solid #d3c7d0; border-radius: 4px; background: #fff; box-shadow: 0 10px 28px rgba(59, 48, 57, 0.14); }
.invoice-number-suggestions[hidden] { display: none; }
.invoice-number-suggestions [role='option'] { display: grid; gap: 2px; padding: 9px 12px; cursor: pointer; }
.invoice-number-suggestions [role='option'] strong { font: 600 13px/1.4 Manrope, sans-serif; color: #43303f; }
.invoice-number-suggestions [role='option'] span { font-size: 12px; line-height: 1.4; color: #73626f; }
.invoice-number-suggestions [role='option']:hover { background: #fcf6f9; }
.invoice-number-suggestions [role='option'][aria-selected='true'] { background: #fbf0f5; box-shadow: inset 3px 0 #b62956; }
.invoice-number-suggestions .invoice-number-suggestions-more { padding: 8px 12px 6px; border-top: 1px solid #eee7ec; font-size: 11px; color: #81717c; }
html body.is-authenticated .contract-card.is-selected { background: #f9e8f0 !important; }
html body.is-authenticated .contract-title { font: 600 13px/1.5 Manrope, sans-serif !important; color: #43303f !important; }
html body.is-authenticated .contract-topline { align-items: flex-start; gap: 9px; }
html body.is-authenticated .contract-card-heading { flex: 1; gap: 10px; }
html body.is-authenticated .contract-meta { gap: 5px; margin-top: 10px; }
html body.is-authenticated .contract-snippet { color: #73626f; font-size: 12px; line-height: 1.6; }
html body.is-authenticated .contract-select-toggle { width: 24px; min-width: 24px; height: 24px; min-height: 24px; border: 1px solid #97818f; border-radius: 4px !important; background: #fff; }
html body.is-authenticated .contract-select-toggle.is-selected { color: #fff; background: #b62956; border-color: #b62956; }
html body.is-authenticated .month-chip { padding: 6px 0; margin: 14px 0 4px; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: #876173 !important; }
html body.is-authenticated :is(.detail-card,.detail-block,.kpi-detail-card,.invoice-editor-card) { padding: 20px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; }
html body.is-authenticated .detail-card { padding-top: 0 !important; }
html body.is-authenticated .detail-block { border-top: 1px solid #e5dfe5 !important; }
html body.is-authenticated #contract-detail .detail-grid { grid-template-columns: 1fr; gap: 0; }
html body.is-authenticated .detail-title { font: 600 21px/1.45 Manrope, sans-serif !important; color: #402d3b !important; margin: 20px 0 12px; overflow-wrap: anywhere; }
html body.is-authenticated :is(.detail-summary,.detail-text) { color: #6b5865; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
html body.is-authenticated .detail-list li { gap: 6px; padding-block: 12px; border-color: #eee8ed; }
html body.is-authenticated .detail-list :is(strong,.meta-text) { font-size: 13px; color: #493442; }
html body.is-authenticated .raw-document summary { cursor: pointer; color: #775268; font-size: 13px; font-weight: 600; }
html body.is-authenticated .raw-document[open] summary { margin-bottom: 14px; }
html body.is-authenticated .detail-editor .detail-header { position: sticky; top: 0; z-index: 3; background: #fff; padding: 12px 0; border-bottom: 1px solid #e5dfe5; }
html body.is-authenticated :is(.duplicate-card,.health-card,.admin-user-card,.admin-diagnostic-card) { border: 1px solid #e5dfe5 !important; border-radius: 6px !important; background: #fff !important; background-image: none !important; box-shadow: none !important; }
html body.is-authenticated .duplicate-side { min-width: 0; padding: 16px; border-color: #e5dfe5; border-radius: 5px; background: #faf7fa; }
html body.is-authenticated .duplicate-card { content-visibility: auto; contain-intrinsic-size: auto 600px; }
html body.is-authenticated .duplicate-header h3 { margin: 0; font: 600 16px/1.5 Manrope,sans-serif; color: #4b3343; overflow-wrap: anywhere; }
html body.is-authenticated .kpi-detail-hero { padding: 4px 0 24px; border-bottom: 1px solid #e5dfe5; }
html body.is-authenticated .kpi-detail-copy h2 { font: 400 34px/1.2 'Instrument Serif',serif !important; color: #432d3d; }
html body.is-authenticated .kpi-detail-copy p { color: #715b6a; font-size: 13px; }
html body.is-authenticated .kpi-detail-meta-card { min-width: 0; padding: 18px 0; border: 0; border-radius: 0; background: transparent; }
html body.is-authenticated .kpi-detail-meta-card strong { font: 600 22px/1.3 Manrope,sans-serif; color: #8c3152; overflow-wrap: anywhere; }
html body.is-authenticated .kpi-detail-meta-card .metric-foot { color: #786472; font-size: 12px; }
html body.is-authenticated .kpi-detail-grid { grid-template-columns: minmax(0,1fr); }
html body.is-authenticated .kpi-chart-bars { display: flex; align-items: flex-end; gap: 14px; padding-top: 15px; overflow-x: auto; }
html body.is-authenticated .kpi-chart-bar { flex: 1; min-width: 64px; }
html body.is-authenticated .kpi-chart-bar-fill { border-radius: 3px 3px 0 0; background: #c57796 !important; box-shadow: none; }
html body.is-authenticated .kpi-chart-bar.is-negative .kpi-chart-bar-fill { background: #b94646 !important; }
html body.is-authenticated .kpi-chart-bar-value { font-size: 11px; color: #714257; }
html body.is-authenticated .kpi-detail-list { color: #6f5667; font-size: 13px; line-height: 1.7; }
html body.is-authenticated .invoice-preview-panel.is-floating-open,
html body.is-authenticated .details-panel.is-floating-open { border: 1px solid #e3d6df !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 20px 70px #39283222 !important; }
html body.is-authenticated:is(.is-invoice-preview-open,.is-contract-preview-open,.is-assistant-open)::after { display: block !important; position: fixed; inset: 0 !important; z-index: 120 !important; background: #36212f45; }
/* Une superposition ouverte fige la page derriere elle : sinon la molette fait
   defiler la liste sous le voile, on perd sa position de lecture et on croit
   agir sur ce qu'on voit. Exigence RF-15 de la spec 00. Le gel lui-meme est
   pose par app.js, qui retient la position et la rend a la fermeture : un
   overflow: hidden sur la racine ramenait la lecture en haut sans la
   redescendre. */
html body.is-authenticated :is(.invoice-preview-panel.is-floating-open,.details-panel.is-floating-open,#assistant-drawer) { z-index: 130 !important; }
html body.is-authenticated .invoice-preview-panel.is-floating-open > .section-heading { display: none; }
html body.is-authenticated .invoice-preview-panel.is-floating-open .invoice-editor-card > .section-heading { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; position: sticky; top: 0; z-index: 5; padding: 12px 0; background: #fff; border-bottom: 1px solid #e5dfe5; }
html body.is-authenticated .invoice-preview-panel.is-floating-open .invoice-editor-card > .section-heading h3 { grid-column: 1; }
html body.is-authenticated .invoice-preview-panel.is-floating-open .invoice-editor-card > .section-heading button { grid-column: 2; grid-row: 1/3; }
html body.is-authenticated .invoice-sheet-editor { background: #fff !important; border: 1px solid #e5dfe5 !important; border-radius: 5px !important; box-shadow: none !important; }
html body.is-authenticated .invoice-sheet-editor .invoice-hero { border-radius: 0 !important; background: #faf3f7 !important; background-image: none !important; color: #63354a; }
html body.is-authenticated .invoice-sheet-editor .invoice-hero-title { color: #84324f !important; font: 400 32px/1.1 'Instrument Serif',serif !important; }
html body.is-authenticated .invoice-summary-card { border: 1px solid #e4d9e1; border-radius: 4px; background: #fff; }
html body.is-authenticated .invoice-summary-card-accent { background: #f9eaf1; color: #963451; }
html body.is-authenticated #assistant-drawer { border-left: 1px solid #e4d9e1; background: #fff !important; }
html body.is-authenticated #assistant-drawer h2 { font: 400 27px/1.2 'Instrument Serif',serif !important; color: #523346; }
html body.is-authenticated #assistant-close { display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; }
html body.is-authenticated .empty-state, html body.is-authenticated .empty-list { padding: 28px 16px !important; color: #78626f; background: #faf7f9 !important; border: 1px dashed #d1bcc9 !important; border-radius: 5px !important; font-size: 13px; }
html body :is(button,input,select,textarea,summary,[role='button']):focus-visible { outline: 2px solid #a62954 !important; outline-offset: 3px; }

/* Dashboard legibility and a shared mouse/keyboard chart readout. */
html body.is-authenticated .workspace .metric-card { border-radius: 6px !important; background: #fff !important; background-image: none !important; box-shadow: none !important; }
html body.is-authenticated .workspace .metric-card .metric-label { color: #72566a !important; font-size: 12px !important; letter-spacing: 0 !important; }
html body.is-authenticated .workspace .metric-card::after { content: none !important; display: none !important; }
html body.is-authenticated :is(.review-queue-card,.notification-card,.backup-card) { display: grid; gap: 12px; padding: 18px !important; border: 1px solid #e5dfe5 !important; border-radius: 6px !important; background: #fff !important; background-image: none !important; box-shadow: none !important; }
html body.is-authenticated :is(.review-queue-card,.notification-card) :is(p,h3) { margin: 0; }
html body.is-authenticated .admin-diagnostics-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 26px; }
html body.is-authenticated .admin-diagnostics-grid .metric-card { min-height: 130px; padding: 18px !important; }
html body.is-authenticated .admin-diagnostics-grid .metric-value { font-size: 24px !important; }
html body.is-authenticated .admin-user-form-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
html body.is-authenticated .contracts-toolbar-shell :is([data-action='clear-accounting-selection'],[data-action='delete-selected-accounting'],[data-action='download-selected-accounting']):disabled { display: none; }
/* L'ecran de connexion est traite en fin de fichier, en deux volets. */
html body.is-authenticated #app-shell :is(.deals-grid,.invoices-grid,.accounting-grid) { display: grid !important; }
html body.is-authenticated .invoice-preview-panel.is-editor-open { grid-column: 1/-1; position: static; max-height: none; }
html body.is-authenticated .details-panel:not(.is-floating-open) .contract-preview-close { display: none !important; }
html body.is-authenticated .detail-actions .lucide { width: 17px !important; height: 17px !important; }
html body.is-authenticated .document-open { display: inline; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
html body.is-authenticated .document-open:hover { color: #a32650; text-decoration: underline; text-underline-offset: 3px; }
html body.is-authenticated .invoice-kpis { display: grid; gap: 0 !important; border-block: 1px solid #e5dfe5; }
html body.is-authenticated #accounting-view .invoice-kpis { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
html body.is-authenticated .workspace .invoice-kpis .metric-card { min-height: 110px; padding: 18px 16px !important; border: 0 !important; border-right: 1px solid #e5dfe5 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; }
html body.is-authenticated .workspace .invoice-kpis .metric-card:last-child { border-right: 0 !important; }
html body.is-authenticated .workspace .invoice-kpis .metric-label { min-height: 28px; font-size: 12px !important; letter-spacing: 0 !important; color: #715b68 !important; }
html body.is-authenticated .workspace .invoice-kpis .metric-value { margin: 0 0 8px; font-size: 25px !important; }
html body.is-authenticated .workspace .invoice-kpis .metric-foot { font-size: 11px; color: #796775; }
html body.is-authenticated .workspace #accounting-view .accounting-quick-actions-panel { padding-bottom: 24px !important; margin-bottom: 24px !important; border-bottom: 1px solid #e5dfe5 !important; }
html body .dashboard-eyebrow, html body .studio-section-heading .dashboard-eyebrow { color: #755365; font-size: 11px; }
html body .dashboard-context, html body .dashboard-context small { color: #725969; font-size: 12px; }
html body .chart-legend, html body .section-meta, html body .attention-copy small,
html body .attention-note, html body .studio-brand div > span { color: #78616f; font-size: 12px; }
html body.is-authenticated #dashboard-view .deals-dashboard-grid .metric-foot { font-size: 11px !important; color: #7c6673 !important; }
html body .history-axis { font-size: 10px; color: #78616f; }
html body .history-column > strong { font-size: 11px; color: #6d4f62; }
html body .dashboard-history { position: relative; }
html body .history-column::after { content: attr(data-tooltip); display: none; position: absolute; z-index: 4; top: -3px; right: 0; max-width: 100%; padding: 7px 10px; border: 1px solid #e3c9d7; border-radius: 4px; color: #71364f; background: #fff; box-shadow: 0 3px 14px #59223e0c; font: 600 11px/1.4 Manrope,sans-serif; pointer-events: none; }
html body .history-column:is(:hover,:focus-visible)::after { display: block; }
html body .history-column:is(:hover,:focus-visible) .history-fill { background: #8c1c43; }
html body .app-nav-submenu .tab-button > [aria-hidden] { display: none; }
@media (min-width:768px) and (max-width:1180px) {
  html body .app-sidebar .signature-copy { display: none; }
  html body .app-sidebar .paola-signature img { width: 28px; }
  html body .app-sidebar .app-nav-submenu { margin: 0; padding: 0; border: 0; }
  html body.is-authenticated .app-sidebar .tab-button, html body.is-authenticated .app-sidebar .app-nav-group summary { justify-content: center !important; padding: 10px 6px !important; }
  html body .app-nav-submenu .tab-button > [aria-hidden] { display: inline-flex; }
  html body .app-nav-submenu .tab-button::before { display: none; }
}
@media (max-width:1280px) {
  html body.is-authenticated .content-grid { grid-template-columns: 200px minmax(0,1fr); }
  html body.is-authenticated .workspace .details-panel:not(.is-floating-open) { grid-column: 1/-1; position: static; max-height: none; padding: 24px 0 0 !important; border-left: 0 !important; border-top: 1px solid #e5dfe5 !important; }
  html body.is-authenticated .admin-diagnostics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
  html body.is-authenticated #app-shell > .workspace { padding: 22px 18px 88px !important; }
  html body.is-authenticated.is-dashboard #app-shell > .workspace { padding-top: 0 !important; }
  html body.is-authenticated .view-heading { padding-bottom: 18px; margin-bottom: 20px; }
  html body.is-authenticated .view-heading h1 { font-size: 34px !important; }
  html body.is-authenticated :is(.deals-grid,.content-grid,.invoices-grid,.accounting-grid) { grid-template-columns: minmax(0,1fr); gap: 22px; }
  html body.is-authenticated .workspace :is(.deals-side-panel,.filters-panel,.invoices-side-panel,.accounting-side-panel) { position: static; padding: 0 0 20px !important; border-right: 0 !important; border-bottom: 1px solid #e5dfe5 !important; }
  html body.is-authenticated :is(input,select,textarea) { min-height: 44px; font-size: 16px; }
  html body.is-authenticated :is(.primary-button,.secondary-button,.ghost-button,.danger-button,label.inline-file-button) { min-height: 44px; }
  html body.is-authenticated .contract-select-toggle { width: 36px; min-width: 36px; height: 36px; }
  html body.is-authenticated .detail-title { font-size: 19px !important; }
  html body.is-authenticated .detail-editor .editor-grid { grid-template-columns: minmax(0,1fr); }
  html body.is-authenticated .kpi-detail-meta { grid-template-columns: minmax(0,1fr); gap: 0; }
  html body.is-authenticated .kpi-detail-meta-card { border-bottom: 1px solid #e5dfe5; padding: 14px 0; }
  html body.is-authenticated .kpi-detail-copy h2 { font-size: 28px !important; }
  html body .dashboard-context, html body .dashboard-context small { font-size: 10px; }
  html body .studio-section-heading .dashboard-eyebrow { font-size: 10px; }
  html body .history-column > strong { font-size: 9px; }
  html body .history-axis { width: 36px; }
  html body .attention-copy small, html body .attention-note, html body .studio-brand div > span { font-size: 11px; }
  html body .chart-legend { display: none; }
  html body .history-column::after { font-size: 10px; }
  html body.is-authenticated :is(.invoice-preview-panel.is-floating-open,.details-panel.is-floating-open) { inset: 12px !important; width: auto !important; max-height: calc(100dvh - 24px) !important; padding: 16px !important; }
  html body.is-authenticated #accounting-view .invoice-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html body.is-authenticated .workspace .invoice-kpis .metric-value { font-size: 21px !important; overflow-wrap: anywhere; }
  html body.is-authenticated .admin-diagnostics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body.is-authenticated .admin-user-form-grid { grid-template-columns: minmax(0,1fr); }
}
 .reauth-dialog { width: min(420px, calc(100vw - 32px)); border: 1px solid #d7cdd2; border-radius: 8px; padding: 24px; color: #29232a; background: #fff; }
 .reauth-dialog::backdrop { background: rgb(35 25 31 / 40%); }
 .reauth-dialog label { display: grid; gap: 8px; margin: 16px 0; }
.proposal-dialog { width: min(880px, calc(100vw - 32px)); max-height: 85vh; overflow: auto; }
.proposal-columns, .proposal-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #e4e6eb; }
.proposal-row span { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.proposal-row input[type=checkbox] { width: 16px; height: 16px; display: inline-block; margin-right: 8px; accent-color: #ba315b; }
@media (max-width: 560px) { .proposal-columns, .proposal-row { gap: 8px; font-size: 12px; } }
.import-result { margin-top: 16px; border-top: 1px solid #e4e6eb; padding-top: 12px; font-size: 12px; }
.import-result ul { list-style: none; padding: 0; max-height: 260px; overflow: auto; }
.import-result li { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid #edf0f2; overflow-wrap: anywhere; }

/* ==========================================================================
   Ecran de connexion : deux volets dans un meme cadre.
   Le volet de gauche porte la marque et les modules, celui de droite l'acces.
   Toutes les animations sont neutralisees si le systeme demande moins de mouvement.
   ========================================================================== */

html body:not(.is-authenticated) .auth-shell {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 100vh;
  padding: clamp(16px, 4vw, 48px);
  overflow: hidden;
  background: linear-gradient(150deg, #fdfbfc 0%, #f8f1f5 46%, #fbf6f2 100%);
}

/* Trois halos derivent lentement derriere le cadre. */
html body:not(.is-authenticated) .auth-aurora { position: absolute; inset: 0; pointer-events: none; }
html body:not(.is-authenticated) .auth-aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(8px); }
html body:not(.is-authenticated) .auth-aurora-a {
  width: 46vw; height: 46vw; left: -14vw; top: -16vw;
  background: radial-gradient(circle, rgba(182,41,86,.16), transparent 68%);
  animation: authDrift 22s ease-in-out infinite;
}
html body:not(.is-authenticated) .auth-aurora-b {
  width: 38vw; height: 38vw; right: -12vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(56,132,103,.14), transparent 70%);
  animation: authDrift 27s ease-in-out infinite reverse;
}
html body:not(.is-authenticated) .auth-aurora-c {
  width: 30vw; height: 30vw; right: 22vw; top: -10vw;
  background: radial-gradient(circle, rgba(212,164,120,.16), transparent 70%);
  animation: authDrift 33s ease-in-out infinite;
}

html body:not(.is-authenticated) .auth-frame {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  width: 100%;
  max-width: 1160px;
  min-height: min(680px, calc(100vh - 96px));
  margin-inline: auto;
  border: 1px solid #efe6ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 36px 90px rgba(58, 33, 48, .13), 0 2px 6px rgba(58, 33, 48, .05);
  overflow: hidden;
  animation: authFrameIn 900ms cubic-bezier(.22, 1, .36, 1) both;
}

/* ---- Volet de marque ---- */

html body:not(.is-authenticated) .auth-brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(34px, 4.4vw, 62px);
  background: linear-gradient(158deg, #2b1020 0%, #4a1230 48%, #701e42 100%);
  overflow: hidden;
}
html body:not(.is-authenticated) .auth-brand-panel::after {
  content: '';
  position: absolute;
  right: -18%; top: -12%;
  width: 74%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(233,167,191,.22), rgba(212,164,120,.12) 44%, transparent 72%);
  pointer-events: none;
}
html body:not(.is-authenticated) .auth-brand-inner { position: relative; width: 100%; max-width: 430px; }

html body:not(.is-authenticated) .auth-brand-eyebrow {
  margin: 0 0 18px;
  color: rgba(246,226,236,.62);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  animation: authFadeUp 700ms cubic-bezier(.22,1,.36,1) 120ms both;
}
html body:not(.is-authenticated) .auth-brand-title {
  display: grid;
  margin: 0;
  color: #fbf4f7;
  font: 400 clamp(46px, 5.2vw, 72px)/.94 'Instrument Serif', serif;
  letter-spacing: -.01em;
}
html body:not(.is-authenticated) .auth-brand-title span { display: block; }
html body:not(.is-authenticated) .auth-brand-title span:first-child { animation: authReveal 900ms cubic-bezier(.22,1,.36,1) 180ms both; }
html body:not(.is-authenticated) .auth-brand-title span:last-child { color: #eaa5bf; animation: authReveal 900ms cubic-bezier(.22,1,.36,1) 320ms both; }

html body:not(.is-authenticated) .auth-brand-rule {
  display: block;
  width: 62px; height: 2px;
  margin: 26px 0 20px;
  background: linear-gradient(90deg, #eaa5bf, #d4a478);
  transform-origin: left center;
  animation: authDraw 620ms cubic-bezier(.22,1,.36,1) 420ms both;
}
html body:not(.is-authenticated) .auth-brand-text {
  margin: 0 0 34px;
  max-width: 27ch;
  text-wrap: balance;
  color: rgba(249,238,244,.76);
  font-size: 15px;
  line-height: 1.55;
  animation: authFadeUp 700ms cubic-bezier(.22,1,.36,1) 480ms both;
}

/* Les quatre modules descendent en cascade, comme des fiches posees. */
html body:not(.is-authenticated) .auth-modules { display: grid; gap: 10px; margin: 0 0 36px; padding: 0; list-style: none; }
html body:not(.is-authenticated) .auth-module {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(18, 4, 12, .18);
  transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms, border-color 260ms;
}
html body:not(.is-authenticated) .auth-module:nth-child(1) { margin-left: 0; animation: authFadeUp 640ms cubic-bezier(.22,1,.36,1) 560ms both, authFloat 7.5s ease-in-out 1.4s infinite; }
html body:not(.is-authenticated) .auth-module:nth-child(2) { margin-left: 26px; animation: authFadeUp 640ms cubic-bezier(.22,1,.36,1) 650ms both, authFloat 8.4s ease-in-out 1.9s infinite; }
html body:not(.is-authenticated) .auth-module:nth-child(3) { margin-left: 52px; animation: authFadeUp 640ms cubic-bezier(.22,1,.36,1) 740ms both, authFloat 9.1s ease-in-out 1.6s infinite; }
html body:not(.is-authenticated) .auth-module:nth-child(4) { margin-left: 26px; animation: authFadeUp 640ms cubic-bezier(.22,1,.36,1) 830ms both, authFloat 7.9s ease-in-out 2.3s infinite; }
html body:not(.is-authenticated) .auth-module:hover {
  transform: translateY(-3px);
  border-color: rgba(234,165,191,.42);
  background: rgba(255,255,255,.12);
  box-shadow: 0 16px 34px rgba(18, 4, 12, .26);
}
html body:not(.is-authenticated) .auth-module-glyph {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(234,165,191,.16);
  color: #f2c3d3;
  font-size: 16px;
  line-height: 1;
}
html body:not(.is-authenticated) .auth-module:nth-child(2) .auth-module-glyph,
html body:not(.is-authenticated) .auth-module:nth-child(4) .auth-module-glyph { background: rgba(160,214,189,.16); color: #a9dcc4; }
html body:not(.is-authenticated) .auth-module-copy { display: grid; gap: 2px; min-width: 0; }
html body:not(.is-authenticated) .auth-module-copy strong { color: #fbf4f7; font-size: 13px; font-weight: 600; }
html body:not(.is-authenticated) .auth-module-copy small { color: rgba(249,238,244,.62); font-size: 11px; }

html body:not(.is-authenticated) .auth-brand-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(249,238,244,.66);
  font-size: 11px;
  animation: authFadeUp 700ms cubic-bezier(.22,1,.36,1) 940ms both;
}
html body:not(.is-authenticated) .auth-brand-foot-mark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7ad3a9;
  box-shadow: 0 0 0 0 rgba(122,211,169,.48);
  animation: authPing 3.4s ease-out infinite;
}

/* ---- Volet d'acces ---- */

html body:not(.is-authenticated) .auth-login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 4vw, 56px);
  background: #fff;
  border-left: 1px solid #f2eaef;
}
html body:not(.is-authenticated) .auth-frame .auth-card {
  width: 100%;
  max-width: 372px;
  min-height: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  animation: authFadeUp 780ms cubic-bezier(.22,1,.36,1) 320ms both;
}
html body:not(.is-authenticated) .auth-frame .auth-card::before { content: none; }

/* La colonne de la grille se reduit au texte le plus large : sans justify-content,
   le centrage se ferait a l'interieur de cette colonne etroite, calee a gauche. */
html body:not(.is-authenticated) .auth-card-header { display: grid; justify-items: center; justify-content: center; text-align: center; }
html body:not(.is-authenticated) .auth-signature { display: none; }
html body:not(.is-authenticated) .auth-lock {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 22px;
  border: 1px solid #efe0e8;
  border-radius: 15px;
  background: #fdf7fa;
  color: #b62956;
  box-shadow: 0 0 0 0 rgba(182,41,86,.24);
  animation: authPing 3.8s ease-out 1s infinite;
}
html body:not(.is-authenticated) .auth-lock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body:not(.is-authenticated) .auth-title { margin: 0; color: #2f2430; font: 400 38px/1.1 'Instrument Serif', serif; letter-spacing: 0; }
html body:not(.is-authenticated) .auth-title-rule {
  display: block;
  width: 42px; height: 2px;
  margin: 14px 0 16px;
  background: linear-gradient(90deg, #d4a478, #b62956);
  transform-origin: center;
  animation: authDraw 560ms cubic-bezier(.22,1,.36,1) 680ms both;
}
html body:not(.is-authenticated) .auth-intro { margin: 0 0 30px; color: #7c6b77; font-size: 13px; }

html body:not(.is-authenticated) .auth-form { display: grid; gap: 17px; }
html body:not(.is-authenticated) .auth-field { display: grid; gap: 7px; }
html body:not(.is-authenticated) .auth-field > span:first-child {
  color: #5f5060;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html body:not(.is-authenticated) .auth-input-wrap { position: relative; display: block; }
html body:not(.is-authenticated) .auth-input-wrap input {
  width: 100%;
  min-height: 50px;
  padding: 0 44px 0 42px;
  border: 1px solid #e6dde5;
  border-radius: 9px;
  background: #fdfcfd;
  color: #33262f;
  /* Sous 16 px, iOS grossit la page des qu'on touche le champ : la connexion
     partait de travers avant meme la premiere frappe. Regle R7. */
  font-size: 16px;
  transition: border-color 190ms, box-shadow 190ms, background 190ms, transform 190ms;
}
html body:not(.is-authenticated) .auth-input-wrap input::placeholder { color: #a798a4; }
html body:not(.is-authenticated) .auth-input-wrap input:focus {
  outline: 0;
  transform: translateY(-1px);
  border-color: #cf7a9a;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(182,41,86,.10), 0 10px 22px rgba(112,40,70,.07);
}
html body:not(.is-authenticated) .auth-input-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: #b09aa8;
  pointer-events: none;
  transition: color 190ms;
}
html body:not(.is-authenticated) .auth-input-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body:not(.is-authenticated) .auth-input-wrap:focus-within .auth-input-icon { color: #b62956; }
html body:not(.is-authenticated) .auth-password-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b09aa8;
  cursor: pointer;
  transition: color 170ms, background 170ms;
}
html body:not(.is-authenticated) .auth-password-toggle:hover { background: #f7eef3; color: #b62956; }
html body:not(.is-authenticated) .auth-password-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

html body:not(.is-authenticated) .auth-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 9px;
  padding: 0 20px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(120deg, #a52551 0%, #b62956 52%, #8c1c43 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(150, 32, 74, .22);
  transition: transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 200ms;
}
html body:not(.is-authenticated) .auth-submit::after {
  content: '→';
  position: static;
  font-size: 15px;
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
html body:not(.is-authenticated) .auth-submit::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg);
  transition: left 620ms cubic-bezier(.22,1,.36,1);
}
html body:not(.is-authenticated) .auth-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(150, 32, 74, .28); }
html body:not(.is-authenticated) .auth-submit:hover::before { left: 115%; }
html body:not(.is-authenticated) .auth-submit:hover::after { transform: translateX(4px); }
html body:not(.is-authenticated) .auth-submit:active { transform: translateY(0); }

html body:not(.is-authenticated) .auth-status { margin: 16px 0 0; text-align: center; font-size: 12px; }
html body:not(.is-authenticated) .auth-help-text { margin: 26px 0 0; color: #93818e; font-size: 11px; text-align: center; }

html body:not(.is-authenticated) .auth-loader-view { display: grid; justify-items: center; text-align: center; min-height: 320px; align-content: center; gap: 6px; }
html body:not(.is-authenticated) .auth-loader-title { margin-top: 14px; }
html body:not(.is-authenticated) .auth-loader-text { color: #7c6b77; font-size: 13px; }

@keyframes authFrameIn { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes authFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes authReveal { from { opacity: 0; clip-path: inset(105% 0 -10% 0); transform: translateY(10px); } to { opacity: 1; clip-path: inset(-15% 0 -10% 0); transform: none; } }
@keyframes authDraw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes authDrift { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3vw,2vw,0) scale(1.08); } }
@keyframes authPing {
  0% { box-shadow: 0 0 0 0 rgba(182,41,86,.26); }
  60% { box-shadow: 0 0 0 14px rgba(182,41,86,0); }
  100% { box-shadow: 0 0 0 0 rgba(182,41,86,0); }
}

@media (max-width: 980px) {
  html body:not(.is-authenticated) .auth-frame { grid-template-columns: 1fr; min-height: 0; }
  html body:not(.is-authenticated) .auth-brand-panel {
    display: block;
    min-height: 0;
    padding: calc(32px + env(safe-area-inset-top)) 26px 30px;
    text-align: left;
  }
  html body:not(.is-authenticated) .auth-brand-inner { max-width: none; }
  html body:not(.is-authenticated) .auth-brand-title { font-size: clamp(38px, 11vw, 52px); }
  html body:not(.is-authenticated) .auth-modules { display: none; }
  html body:not(.is-authenticated) .auth-brand-text { margin-bottom: 16px; }
  /* Sans les fiches de modules, le formulaire doit tenir sous la ligne de flottaison. */
  html body:not(.is-authenticated) .auth-lock { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 13px; }
  html body:not(.is-authenticated) .auth-lock svg { width: 19px; height: 19px; }
  html body:not(.is-authenticated) .auth-title { font-size: 32px; }
  html body:not(.is-authenticated) .auth-title-rule { margin: 11px 0 12px; }
  html body:not(.is-authenticated) .auth-intro { margin-bottom: 20px; }
  html body:not(.is-authenticated) .auth-login-panel { border-left: 0; border-top: 1px solid #f2eaef; padding: 34px 28px 40px; }
  html body:not(.is-authenticated) .auth-frame .auth-card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.is-authenticated) .auth-frame,
  html body:not(.is-authenticated) .auth-frame .auth-card,
  html body:not(.is-authenticated) .auth-aurora span,
  html body:not(.is-authenticated) .auth-module,
  html body:not(.is-authenticated) .auth-lock,
  html body:not(.is-authenticated) .auth-brand-foot-mark,
  html body:not(.is-authenticated) .auth-brand-eyebrow,
  html body:not(.is-authenticated) .auth-brand-title span,
  html body:not(.is-authenticated) .auth-brand-rule,
  html body:not(.is-authenticated) .auth-brand-text,
  html body:not(.is-authenticated) .auth-title-rule { animation: none; }
  html body:not(.is-authenticated) .auth-submit:hover,
  html body:not(.is-authenticated) .auth-module:hover { transform: none; }
  html body:not(.is-authenticated) .auth-submit::before { display: none; }
}

/* Restes decoratifs des maquettes precedentes, neutralises pour ne pas se superposer. */
html body:not(.is-authenticated) .auth-frame::before,
html body:not(.is-authenticated) .auth-frame::after,
html body:not(.is-authenticated) .auth-brand-panel::before,
html body:not(.is-authenticated) .auth-shell::before,
html body:not(.is-authenticated) .auth-shell::after { content: none; }
html body:not(.is-authenticated) .auth-input-wrap {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Monogramme qui se trace, reflet qui traverse le volet sombre, pastille verte. */
html body:not(.is-authenticated) .auth-mark { display: block; width: 44px; margin-bottom: 26px; }
html body:not(.is-authenticated) .auth-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
html body:not(.is-authenticated) .auth-mark path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
html body:not(.is-authenticated) .auth-mark-bowl { stroke: #eaa5bf; stroke-width: 6; animation: authDrawMark 1100ms cubic-bezier(.65,0,.35,1) 240ms forwards; }
html body:not(.is-authenticated) .auth-mark-stem { stroke: rgba(212,164,120,.9); stroke-width: 3; animation: authDrawMark 900ms cubic-bezier(.65,0,.35,1) 520ms forwards; }

html body:not(.is-authenticated) .auth-sheen {
  position: absolute;
  inset: -25% -60%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 43%, rgba(255,255,255,.11) 50%, transparent 57%);
  animation: authSheen 9s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}

html body:not(.is-authenticated) .auth-brand-foot-mark { animation: authPingVert 3.4s ease-out infinite; }

@keyframes authDrawMark { to { stroke-dashoffset: 0; } }
@keyframes authSheen {
  0% { transform: translateX(-42%); opacity: 0; }
  5% { opacity: 1; }
  23% { transform: translateX(42%); opacity: 0; }
  100% { transform: translateX(42%); opacity: 0; }
}
@keyframes authPingVert {
  0% { box-shadow: 0 0 0 0 rgba(122,211,169,.38); }
  60% { box-shadow: 0 0 0 13px rgba(122,211,169,0); }
  100% { box-shadow: 0 0 0 0 rgba(122,211,169,0); }
}

@media (max-width: 980px) {
  html body:not(.is-authenticated) .auth-mark { width: 32px; margin-bottom: 13px; }
  html body:not(.is-authenticated) .auth-brand-eyebrow { margin-bottom: 11px; }
  html body:not(.is-authenticated) .auth-brand-rule { margin: 18px 0 15px; }
}

/* Rappel : ce bloc doit rester le dernier, il neutralise les animations ajoutees ci-dessus. */
@media (prefers-reduced-motion: reduce) {
  html body:not(.is-authenticated) .auth-sheen,
  html body:not(.is-authenticated) .auth-brand-foot-mark,
  html body:not(.is-authenticated) .auth-mark path { animation: none; }
  html body:not(.is-authenticated) .auth-sheen { display: none; }
  html body:not(.is-authenticated) .auth-mark path { stroke-dashoffset: 0; }
}

/* Ligne atteinte par un lien : sans repere, on ne sait pas ce que le lien a
   ouvert. Le contour s'efface seul au bout de quelques secondes. */
html body.is-authenticated .est-ciblee {
  outline: 2px solid #b62956;
  outline-offset: 3px;
  border-radius: 6px;
  animation: cibleAtteinte 2.4s ease-out;
}
@keyframes cibleAtteinte {
  0% { background-color: #f7e4ea; }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html body.is-authenticated .est-ciblee { animation: none; }
}

/* --- Volets flottants sur telephone -----------------------------------------
   Trois defauts mesures a la recette UX : le cadre depassait de l'ecran a
   droite, une regle de largeur heritee l'emportant sur les marges ; la commande
   de fermeture partait hors de vue des qu'on defilait dans la fiche ; et le
   voile, simple pseudo-element, laissait passer l'appui au corps de page sans
   rien fermer. Regles R2 et R6 du cahier de recette. */
html body.is-authenticated #contracts-view .details-panel.is-floating-open,
html body.is-authenticated #invoices-view .invoice-preview-panel.is-floating-open {
  width: auto !important;
  max-width: none !important;
}

/* La fiche se lit en defilant. Une commande collante ne suffit pas : elle ne
   tient que dans la hauteur de son propre bloc, et l'en-tete de la fiche sort
   de l'ecran des les premiers centimetres. La fermeture est donc ancree au
   cadre lui-meme, toujours au meme endroit, quelle que soit la position de
   lecture. */
html body.is-authenticated .details-panel.is-floating-open .contract-preview-close {
  position: fixed;
  top: 20px;
  right: 20px;
  left: auto;
  z-index: 6;
  /* Sans cette largeur, la regle « tout en pleine largeur » du bloc mobile
     etirait la commande d'un bord a l'autre, par-dessus le cadre. */
  width: auto !important;
  max-width: none !important;
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid #e3d6df !important;
  border-radius: 999px;
  background: #fff !important;
  box-shadow: 0 6px 18px #39283222;
}

/* La place de cette commande est reservee : rien ne passe dessous. */
html body.is-authenticated .details-panel.is-floating-open .detail-header {
  padding-top: 52px;
}

/* --- Fond fige sous une superposition ---------------------------------------
   Une superposition qui couvre l'ecran ne doit pas laisser la page defiler
   dessous, et refermer doit rendre la position de lecture. Figer la page a sa
   place, plutot que masquer son debordement : overflow: hidden sur la racine
   ramenait la lecture en haut et ne la redescendait pas. Regles R3 et R6. */
html body.is-authenticated.est-fige {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Le message d'etat passe devant les volets : sous eux, un « Notes
   enregistrees » n'etait jamais lu. Regle R8. */
html body.is-authenticated .view-heading .status-message {
  z-index: 200;
}

/* --- Cibles tactiles et mise en page tactile --------------------------------
   Mesures de la recette UX : segments de controles a 34 px de haut, boutons a
   icone a 32 px, question de l'assistant a 15,2 px. Sous le doigt il faut viser,
   et sous 16 px iOS grossit la page a la prise de focus. Regle R7. */
@media (max-width: 920px) {
  html body.is-authenticated .control-segment { min-height: 44px; }
  html body.is-authenticated .icon-button { width: 44px; height: 44px; }
  html body.is-authenticated .assistant-home-panel textarea { font-size: 16px; }
}

/* En paysage de telephone, la largeur passe au-dessus de 767 px : le rail
   lateral reparait et redevient la navigation. La barre basse, elle, restait
   dans le flux et occupait 257 px des 390 px de hauteur. Une seule navigation
   a la fois. */
@media (min-width: 768px) {
  html body.is-authenticated .mobile-tab-nav { display: none !important; }
}

/* Entre 768 et 920 px, la grille des listes est deja sur une colonne (ecrans.css)
   mais les panneaux de filtres restaient declares collants : ils ne
   redevenaient statiques qu'a 767 px. Sans effet tant que les
   `position: sticky` etaient morts sous 920 px ; une fois retablis, le panneau,
   empile au-dessus de la liste, collait sous la barre haute pendant que les
   cartes defilaient par-dessus — son titre reparaissait entre deux cartes. Un
   panneau ne colle que lorsqu'il est une colonne a cote de la liste. */
@media (max-width: 920px) {
  html body.is-authenticated .workspace :is(.deals-side-panel,.filters-panel,.invoices-side-panel,.accounting-side-panel) {
    position: static;
  }
}

/* La barre des familles de controles devait rester sous la main : depuis le bas
   d'une famille longue, il faut remonter des dizaines d'ecrans pour en changer
   (regle R1 du cahier de recette UX). Elle etait declaree collante, mais ne
   l'a jamais ete : le masquage du debordement sur html et body annulait tous
   les `position: sticky` du telephone. Ce masquage corrige (ecrans.css, 21
   septembre 2026), elle se mettait a coller — avec ses 235 px, phrase
   d'explication et trois rangees de pastilles, soit 40 % de la hauteur de
   lecture d'un telephone. Elle reste donc dans le flux, comme on l'a toujours
   vue, en attendant une forme compacte (une rangee de pastilles, sans la
   phrase) qui pourra coller sans manger l'ecran. R1 reste a satisfaire. */
@media (max-width: 920px) {
  html body.is-authenticated #control-segments:not([hidden]) {
    margin-inline: -18px;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid #e5dfe5;
  }
}

/* --- Barre haute reellement fixee sur telephone -----------------------------
   Elle etait declaree collante, mais le masquage du debordement horizontal sur
   le corps de page annule l'effet : mesure a -900 px pour un defilement de
   900 px. La commande Assistant, le nom de la section et la signature
   disparaissaient donc des les premiers centimetres de lecture, et il fallait
   remonter toute la page pour les retrouver. Regles R2 et R4. */
@media (max-width: 767px) {
  html body.is-authenticated .app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 95;
  }

  /* La hauteur liberee par la barre fixee est rendue au contenu. */
  html body.is-authenticated #app-shell.app-shell {
    padding-top: 64px !important;
  }
}

/* Un deal en ecart de montant ne se distinguait plus d'un deal ordinaire : la
   regle generale des panneaux, en !important, effacait sa teinte d'alerte. La
   couleur ne suffit pas non plus a elle seule : un liseré et une mention
   ecrite portent l'information. Regles R7 et R8. */
html body.is-authenticated .deal-mobile-card.deal-mobile-card-alert {
  border-left: 3px solid #8a3b12 !important;
  background: #fff8f2 !important;
}

html body.is-authenticated .deal-mobile-alerte {
  margin: 4px 0 0;
  color: #8a3b12;
  font-size: 12px;
  font-weight: 600;
}

/* L'en-tete de la feuille de marque reste sous les yeux pendant la saisie :
   en paysage, des qu'un champ etait amene dans l'ecran, le nom de la marque et
   la croix de fermeture sortaient de vue. Regle R2. */
html body.is-authenticated .brand-sheet .brand-sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-block: 10px;
  margin-block: -10px 0;
  background: var(--pg-surface, #fff);
}

/* Metadonnees des listes et des fiches : 12 px minimum sur telephone. Sous
   cette taille, le type, la categorie et l'etat d'une piece deviennent
   illisibles a bout de bras. Regle R7 et exigence UI-03. */
@media (max-width: 920px) {
  html body.is-authenticated :is(.review-pill, .contract-meta, .contract-snippet, .brand-note, .brand-facts dt, .brand-block h3 small, .accounting-mobile-meta, .table-subline) {
    font-size: 12px;
  }
}

/* Bascule « Afficher le mot de passe » : 32 px, sous la cible tactile. R7. */
html body:not(.is-authenticated) .auth-password-toggle {
  width: 44px;
  height: 44px;
}

/* Axe et annees du graphique du pilotage : 9 et 10 px, sous le minimum des
   metadonnees. Ce sont les reperes qui donnent son sens au graphique. R7. */
html body.is-authenticated .history-axis,
html body.is-authenticated .history-column > strong {
  font-size: 12px;
}

/* L'apercu d'une facture est un document A4 dessine en SVG. Reduit pour tenir
   dans la largeur d'un telephone, il tombe a un quart de sa taille et son
   texte descend sous 3 px : le document est la, mais illisible. On lui rend
   une largeur lisible et on le fait defiler dans son cadre, plutot que de le
   faire rentrer de force. Regles R6 et R7. */
@media (max-width: 920px) {
  html body.is-authenticated .invoice-preview-visual {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 0;
  }

  html body.is-authenticated .invoice-preview-visual > svg {
    width: 620px;
    max-width: none;
    height: auto;
  }
}

/* Choix de tri des deals : sur telephone, l'en-tete de tableau n'existe pas et
   le tri n'avait aucune commande. Sur ordinateur il double les en-tetes, qui
   restent le chemin principal : il y reste discret. */
html body.is-authenticated .deal-sort-choice {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

html body.is-authenticated .deal-sort-choice label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #74616f;
}

html body.is-authenticated .deal-sort-choice select {
  min-height: 44px;
  min-width: 150px;
}

html body.is-authenticated .deal-sort-choice .ghost-button {
  min-height: 44px;
}

/* La barre d'actions groupees devait suivre la lecture : depuis le bas d'une
   liste, elle est a plusieurs ecrans au-dessus, donc inatteignable sans
   remonter. En pratique elle ne colle pas, et c'est heureux : son parent
   (#deals-toolbar, etc.) a exactement sa hauteur, donc elle n'a nulle part ou
   coller — mesure le 21 septembre 2026, une fois les `position: sticky` du
   telephone retablis. Telle quelle, elle fait de 223 a 456 px de haut et
   mangerait l'ecran. Pour qu'elle suive vraiment la lecture, il lui faudra une
   forme compacte ; ne pas la « reparer » en l'etat. */
@media (max-width: 920px) {
  html body.is-authenticated #deals-toolbar .invoice-toolbar,
  html body.is-authenticated #contracts-toolbar .contracts-toolbar-shell,
  html body.is-authenticated #invoices-toolbar .invoice-toolbar,
  html body.is-authenticated #accounting-toolbar .invoice-toolbar {
    position: sticky;
    top: 64px;
    z-index: 60;
    background: #fff;
    padding-block: 10px;
    border-bottom: 1px solid #e5dfe5;
  }
}

/* L'Assistant commencait a 53 px alors que la barre haute descend a 64 px :
   il recouvrait ses douze derniers pixels, dont la commande qui l'a ouvert. */
@media (max-width: 767px) {
  html body.is-authenticated .assistant-home-panel {
    inset: 64px 0 calc(62px + env(safe-area-inset-bottom)) !important;
  }
}

/* Sur telephone, le panneau « Synthese du contrat » restait dans le flux sous
   la liste, fiche fermee : 1 361 px de vide utile, places apres la pagination,
   qui se retrouvait hors de l'ecran en bas de page. La fiche s'ouvre en volet
   flottant a cette largeur ; le panneau en flux n'a donc plus d'objet. */
@media (max-width: 920px) {
  html body.is-authenticated #contracts-view .details-panel:not(.is-floating-open) {
    display: none !important;
  }
}

/* La comparaison d'un ecart de montant imposait une grille de 600 px : sur un
   ecran de 390 px, le montant compare et la commande de validation sortaient
   de l'ecran sans que la page puisse defiler jusqu'a eux. Regle R6. */
@media (max-width: 920px) {
  html body.is-authenticated .delta-card,
  html body.is-authenticated .duplicate-grid,
  html body.is-authenticated .delta-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: auto !important;
  }

  html body.is-authenticated #delta-view :is(.panel, article, form, .detail-block) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Premier ecran, avant les chiffres : le titre de vue reprend sa place, sinon
   rien ne nomme ce que l'on regarde pendant le chargement. */
html body.is-authenticated.is-dashboard.chiffres-en-attente .view-heading {
  display: block;
  padding-bottom: 16px;
}

/* La barre d'actions collante ne doit pas recouvrir les filtres en paysage :
   la hauteur utile y est de 390 px, et deux bandeaux fixes en mangeaient la
   moitie. Elle ne colle donc qu'en portrait. */
@media (max-width: 920px) and (orientation: landscape) {
  html body.is-authenticated #deals-toolbar .invoice-toolbar,
  html body.is-authenticated #contracts-toolbar .contracts-toolbar-shell,
  html body.is-authenticated #invoices-toolbar .invoice-toolbar,
  html body.is-authenticated #accounting-toolbar .invoice-toolbar,
  html body.is-authenticated #control-segments:not([hidden]) {
    position: static;
    border-bottom: 0;
  }
}

/* Croix de l'Assistant : mesuree a 36 px, sous la cible tactile, et collee au
   bord du volet. Regle R7. */
@media (max-width: 920px) {
  html body.is-authenticated #assistant-close.icon-button {
    width: 44px;
    height: 44px;
  }
}

/* Le total des familles et le compteur du pilotage ne comptent pas la meme
   chose : l'un des signalements, l'autre des deals distincts. Le dire evite
   deux chiffres qui semblent se contredire. */
html body.is-authenticated .control-segments-note {
  display: block;
  margin-top: 3px;
  color: #74616f;
  font-size: 12px;
  font-weight: 400;
}

/* Organigramme (spec 12) : les noms, les intitules et les fonctions se
   modifient sur la carte meme. Sans cadre tant qu'on n'y touche pas, pour que
   la carte se lise comme un organigramme ; le cadre revient au survol et a la
   saisie. */
html body.is-authenticated #organigramme-view :is(.org-card-holder, .org-card-title, .org-add-mission input) {
  border-color: transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
}

html body.is-authenticated #organigramme-view .org-card-title {
  color: var(--org-tone-ink) !important;
}

html body.is-authenticated #organigramme-view .org-add-mission input {
  color: #74616f !important;
}

html body.is-authenticated #organigramme-view :is(.org-card-holder, .org-card-title, .org-add-mission input):hover {
  border-color: #d3c7d0 !important;
}

html body.is-authenticated #organigramme-view :is(.org-card-holder, .org-card-title, .org-add-mission input, .org-mission-input):focus {
  border-color: #b62956 !important;
  background: #fff !important;
  color: #3b3039 !important;
}

html body.is-authenticated #organigramme-view .org-mission-input {
  border-radius: 6px !important;
}

/* Le lien et le montant sur la carte : une pastille qui est une liste, un champ
   sans cadre tant qu'on n'y touche pas. A partir de 768 px seulement : sur
   telephone, les champs gardent la taille tactile de la regle R7 (44 px et
   16 px, sous lesquels iOS grossit la page a la prise de focus). */
html body.is-authenticated #organigramme-view .org-card-status {
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--pg-chrome) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23606571'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
  color: var(--pg-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: none !important;
}

html body.is-authenticated #organigramme-view .org-card-status.is-cdi {
  background-color: var(--pg-good-bg) !important;
  color: var(--pg-good) !important;
}

html body.is-authenticated #organigramme-view .org-card-status:is(.is-cdd, .is-alternance) {
  background-color: var(--pg-warning-bg) !important;
  color: var(--pg-warning) !important;
}

html body.is-authenticated #organigramme-view .org-card-status.is-mandat {
  background-color: var(--pg-accent-soft) !important;
  color: var(--pg-accent) !important;
}

html body.is-authenticated #organigramme-view .org-card-pay,
html body.is-authenticated #organigramme-view .org-card-pay span {
  color: var(--pg-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

html body.is-authenticated #organigramme-view .org-card-pay input {
  border-color: transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
}

html body.is-authenticated #organigramme-view .org-card-pay input:hover {
  border-color: #d3c7d0 !important;
}

html body.is-authenticated #organigramme-view .org-card-pay input:focus {
  border-color: #b62956 !important;
  background: #fff !important;
}

/* Une saisie qui ne se lit pas comme un montant se voit tout de suite : en
   rouge, cadre compris, focus ou pas. Trouve au test au clic du 21 septembre
   2026 : la classe etait posee, mais la couleur generale des champs gagnait. */
html body.is-authenticated #organigramme-view input[data-org-pay].is-illisible,
html body.is-authenticated #organigramme-view input[data-org-pay].is-illisible:focus {
  border-color: var(--pg-danger) !important;
  color: var(--pg-danger) !important;
}

/* Sur telephone, le champ garde sa taille tactile ; il lui faut seulement la
   largeur de son invite « Montant » et de ses marges interieures. */
@media (max-width: 767px) {
  html body.is-authenticated #organigramme-view .org-card-pay input {
    width: max(7.5em, var(--org-pay-width, 8ch)) !important;
  }

  html body.is-authenticated #organigramme-view .org-card-status {
    width: auto !important;
    max-width: 100% !important;
    padding-right: 34px !important;
    background-position: right 14px center !important;
  }
}

@media (min-width: 768px) {
  html body.is-authenticated #organigramme-view .org-card-status {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 1px 20px 1px 8px !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
  }

  html body.is-authenticated #organigramme-view .org-card-pay input {
    width: var(--org-pay-width, 8ch) !important;
    min-width: 0 !important;
    text-align: left !important;
    min-height: 0 !important;
    height: 22px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
  }
}

/* « Deja paye aujourd'hui » : une case a cocher et sa phrase, pas un titre. */
html body.is-authenticated #organigramme-view .org-pay-existing,
html body.is-authenticated #organigramme-view .org-pay-existing span {
  color: var(--pg-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* En mode lecture, les champs des cartes ne montrent plus qu'ils s'ecrivent. */
html body.is-authenticated #organigramme-view .is-lecture :is(.org-card-holder, .org-card-title):hover {
  border-color: transparent !important;
}


/* Volet de l'Assistant : un en-tete qui reste en haut quand le volet defile.

   En paysage, le volet mesure 336 px et defile dans son cadre. Le champ de
   question garde le focus : a la rotation, le navigateur fait defiler le volet
   pour le laisser visible, et l'en-tete partait hors de l'ecran avec sa croix
   (TR-SUP-06, regle R2). La fraicheur et les raccourcis de la spec 11 avaient
   allonge le volet au point de le faire deborder.

   Trois contraintes ont dicte la forme :
   - un element collant ne sort pas de sa rangee de grille, donc le volet est
     une colonne flexible, et ses enfants ne retrecissent pas, sinon le contenu
     s'ecraserait au lieu de defiler ;
   - sous 920 px, ecrans.css met tout en-tete de section en grille a une
     colonne avec !important, ce qui renvoyait la croix sous le texte : l'en-tete
     du volet garde la grille, sur deux colonnes, le texte puis la croix ;
   - la marge negative du collage suit le rembourrage du volet, 22 px au-dessus
     de 767 px de large et 18 px en dessous. */
/* :not([hidden]) est indispensable : sans lui, cette regle aussi precise que
   « #assistant-drawer[hidden] { display: none !important } » et placee apres
   elle remettait le volet ferme a l'ecran, invisible mais couvrant tout le
   cote droit, et il interceptait les clics (RF-14c). */
html body.is-authenticated #assistant-drawer.assistant-home-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  gap: 18px !important;
  --assistant-padding-top: 22px;
}

html body.is-authenticated #assistant-drawer.assistant-home-panel > * {
  flex-shrink: 0;
}

html body.is-authenticated #assistant-drawer > .section-heading.row {
  position: sticky;
  top: calc(-1 * var(--assistant-padding-top));
  z-index: 3;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
  margin-top: calc(-1 * var(--assistant-padding-top)) !important;
  padding-top: var(--assistant-padding-top);
  padding-bottom: 8px;
  background: #fff;
}

/* Le bloc de texte peut retrecir : la fraicheur se coupe par des points de
   suspension au lieu de deborder du volet. */
html body.is-authenticated #assistant-drawer > .section-heading > div {
  min-width: 0;
}

@media (max-width: 920px) {
  html body.is-authenticated #assistant-drawer.assistant-home-panel {
    gap: 10px !important;
  }
}

@media (max-width: 767px) {
  html body.is-authenticated #assistant-drawer.assistant-home-panel {
    --assistant-padding-top: 18px;
  }
}

/* Sur un ecran bas, l'en-tete collant ne doit pas devenir un bandeau : titre
   plus petit, sans surtitre, fraicheur sur une ligne. */
@media (max-height: 500px) {
  html body.is-authenticated #assistant-drawer > .section-heading h2 {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }

  html body.is-authenticated #assistant-drawer > .section-heading .section-kicker {
    display: none;
  }

  html body.is-authenticated #assistant-drawer .assistant-freshness {
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Memoire (spec 12) : la boite mail de Paola, cherchable depuis l'application. */
.memoire-recherche { display: flex; gap: 10px; margin-bottom: 12px; }
.memoire-recherche input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: 11px 14px; font: inherit;
  color: var(--pg-ink); background: var(--pg-surface);
  border: 1px solid var(--pg-control-border); border-radius: 8px;
}
.memoire-filtres { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.memoire-bruit { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--pg-muted); cursor: pointer; }
.memoire-resultats { display: flex; flex-direction: column; gap: 10px; }
.memoire-resultat {
  background: var(--pg-surface); border: 1px solid var(--pg-line);
  border-radius: 10px; padding: 14px 16px;
}
.memoire-resultat:hover { border-color: var(--pg-accent); }
.memoire-resultat-entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.memoire-etiquette-type {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pg-info); background: var(--pg-info-bg); border-radius: 4px; padding: 3px 7px;
}
.memoire-marque {
  font-size: 11px; color: var(--pg-accent); background: var(--pg-accent-soft);
  border-radius: 4px; padding: 3px 7px;
}
.memoire-resultat-extrait { margin: 0 0 9px; font-size: 14px; line-height: 1.55; }
.memoire-resultat-extrait mark { background: var(--pg-accent-soft); color: var(--pg-ink); border-radius: 2px; padding: 0 2px; }
.memoire-resultat-actions { display: flex; gap: 10px; }
.memoire-entete-vue { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.memoire-entete-vue .section-meta { flex: 1 1 auto; margin: 0; }
.memoire-marque-bloc { margin-bottom: 18px; }
.memoire-marque-bloc h3 { margin: 0 0 8px; font-size: 15px; }
.memoire-marque-bloc ul { margin: 0; padding: 0; list-style: none; }
.memoire-marque-bloc li { padding: 7px 0; border-bottom: 1px solid var(--pg-soft); }
.memoire-marque-bloc li strong { display: block; font-size: 13px; }
.memoire-volet {
  margin-top: 18px; background: var(--pg-surface); border: 1px solid var(--pg-line);
  border-radius: 10px; padding: 16px 18px;
}
.memoire-volet-entete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.memoire-volet-entete > div { flex: 1 1 auto; }
.memoire-volet-entete .section-meta { margin: 4px 0 0; }
.memoire-corps {
  margin: 0; font: inherit; font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto;
}
.memoire-message-fil { padding: 12px 0; border-top: 1px solid var(--pg-soft); }
.memoire-pieces { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 720px) {
  .memoire-recherche { flex-direction: column; }
  .memoire-entete-vue { flex-direction: column; gap: 10px; }
}
.memoire-etendue { margin: 0 0 14px; }

/* Les onglets de la mémoire ont leur propre classe : « .control-segment » designe
   les familles de contrôles, et la recette RF-08b les compte. Emprunter cette
   classe en faisait apparaître neuf là où il en faut six. */
.memoire-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.memoire-onglet {
  font: inherit; font-size: 13px; padding: 7px 15px; cursor: pointer;
  color: var(--pg-ink); background: var(--pg-surface);
  border: 1px solid var(--pg-line); border-radius: 999px;
}
.memoire-onglet:hover { border-color: var(--pg-control-border); }
.memoire-onglet.is-active {
  color: var(--pg-accent); background: var(--pg-accent-soft);
  border-color: var(--pg-accent); font-weight: 600;
}