/* ── Audition view (08_gallery_view.js) — mobile responsive ───────── */ @media (max-width: 720px) { .cf-aud-page-pad { padding: 12px 14px 24px !important; } .cf-aud-list-row { grid-template-columns: 24px 1fr !important; gap: 8px !important; padding: 10px 12px 6px !important; } .cf-aud-list-row .cf-aud-cell-role, .cf-aud-list-row .cf-aud-cell-status, .cf-aud-list-row .cf-aud-cell-dispo { display: none !important; } .cf-aud-list-note { padding: 0 12px 10px 40px !important; } .cf-aud-convoked-row, .cf-aud-hist-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 12px 14px !important; } .cf-aud-convoked-row > *, .cf-aud-hist-row > * { justify-self: start !important; } .cf-aud-modal-shell { padding: 8px !important; } .cf-aud-modal-talent-row { grid-template-columns: 1fr !important; gap: 6px !important; } .cf-aud-actions-row { width: 100%; justify-content: stretch; flex-wrap: wrap; } .cf-aud-actions-row > button { flex: 1 1 auto; justify-content: center; } } /* ── Tournage · Contrats & Facturation responsive collapse ────────────── Desktop layout is a 7-column inline-editable grid (info / inputs / split). On <=720px (phones, narrow tablets), collapse to a 2-column grid so each label/input pair stays paired and the agent can still update billing on the go. */ @media (max-width: 720px) { .cf-contract-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 14px 14px !important; } .cf-contract-row > div:first-child { grid-column: 1 / -1; } .cf-contract-row > div:last-child { grid-column: 1 / -1; text-align: left !important; } } /* ── CP design tokens (Contrats préliminaires / Engagements) ────────── The CP pages emit ALL their cosmetic styling as INLINE styles from the cp… / prelim… helpers in 08_gallery_prelim_contracts.js (no glob written out here — a literal star-slash would close this comment). Inline styles beat the global `body.dark-theme` remaps below (which only know about the legacy Tailwind `bg-gray-*` / `text-white` classes), so a hardcoded `background:#fff` there stayed white in dark mode — the whole CP surface read as a white sheet, or as unreadable dark-on-dark text. Fix: one variable per role, resolved here. The module emits `var(--cp-*)` instead of a hex, so both themes come from this block and nothing needs !important. When adding CP UI, use a token — never a raw light hex. NOT tokenized on purpose: the two standalone printable documents (prelimFichePrintHtml / prelimInvoicePrintHtml). They render into an isolated iframe for "Save as PDF" and must stay light-on-white. */ :root { --cp-surface: #ffffff; /* card / menu / input plate */ --cp-surface-2: #f6f8fa; /* page + inset band */ --cp-surface-3: #f3f4f6; /* muted fill, inactive segment */ --cp-wash: #f2f7fa; /* tinted input / tinted card */ --cp-tint: #e5f0f2; /* teal chip / active nav */ --cp-border: #e5e7eb; --cp-border-soft: rgba(229, 232, 237, 0.6); --cp-hairline: #eef0f2; /* row divider */ --cp-ink: #0f172a; /* headings, values */ --cp-body: #374151; /* body copy (gray-700 sites) */ --cp-body-strong: #1c2028; /* Figma input/body ink */ --cp-sub: #6b7280; /* secondary (gray-500 sites) */ --cp-sub-strong: #4a5466; /* Figma label slate */ --cp-faint: #9ca3af; /* micro-labels, placeholders */ --cp-ghost: #cbd5e1; /* idle icon buttons, disabled */ --cp-teal: #006a85; /* accent TEXT / border / icon */ --cp-teal-solid: #006a85; /* accent FILL (white text on it)*/ --cp-teal-soft: rgba(0, 106, 133, 0.3); --cp-on-teal: #ffffff; --cp-shadow: rgba(0, 0, 0, 0.25); /* Status pairs — fg reads on the page, bg is the chip plate. */ /* `-bg` is the small chip plate; `-bg-soft` is the near-white tint used when the colour covers a whole row or banner. */ --cp-ok: #166534; --cp-ok-bg: #dcfce7; --cp-ok-border: #bbf7d0; --cp-ok-solid: #16a34a; --cp-ok-bg-soft: #f0fdf4; --cp-warn: #92610a; --cp-warn-bg: #fef3c7; --cp-warn-border: #fde68a; --cp-warn-solid:#f59e0b; --cp-warn-bg-soft: #fffbeb; --cp-danger: #b91c1c; --cp-danger-bg: #fee2e2; --cp-danger-border: #fecaca; --cp-danger-solid: #ef4444; --cp-violet: #6d28d9; --cp-violet-bg: #ede9fe; --cp-violet-solid: #8b5cf6; --cp-indigo: #3730a3; --cp-indigo-bg: #e0e7ff; --cp-indigo-solid: #6366f1; --cp-blue: #1d4ed8; --cp-blue-bg: #dbeafe; --cp-blue-solid: #3b82f6; --cp-orange: #9a3412; --cp-orange-bg: #fed7aa; --cp-orange-solid: #f97316; --cp-pink: #9f1239; --cp-pink-bg: #ffe4e6; --cp-pink-solid: #f43f5e; --cp-fuchsia: #86198f; --cp-fuchsia-bg:#f5d0fe; --cp-fuchsia-solid:#c026d3; } body.dark-theme { --cp-surface: #161819; --cp-surface-2: #101112; --cp-surface-3: #202325; --cp-wash: #17201f; --cp-tint: #0d3a45; --cp-border: #2b2f33; --cp-border-soft: rgba(255, 255, 255, 0.09); --cp-hairline: #242729; --cp-ink: #f1f5f9; --cp-body: #d5dae0; --cp-body-strong: #e8ecf1; --cp-sub: #9aa4b1; --cp-sub-strong: #aeb7c2; --cp-faint: #7d8894; --cp-ghost: #545e69; --cp-teal: #4bb6cf; --cp-teal-solid: #00758f; --cp-teal-soft: rgba(75, 182, 207, 0.35); --cp-on-teal: #ffffff; --cp-shadow: rgba(0, 0, 0, 0.6); --cp-ok: #4ade80; --cp-ok-bg: rgba(22, 163, 74, 0.18); --cp-ok-border: rgba(74, 222, 128, 0.35); --cp-ok-solid: #22c55e; --cp-ok-bg-soft: rgba(22, 163, 74, 0.10); --cp-warn: #fbbf24; --cp-warn-bg: rgba(245, 158, 11, 0.18); --cp-warn-border: rgba(251, 191, 36, 0.35); --cp-warn-solid:#f59e0b; --cp-warn-bg-soft: rgba(245, 158, 11, 0.10); --cp-danger: #f87171; --cp-danger-bg: rgba(239, 68, 68, 0.18); --cp-danger-border: rgba(248, 113, 113, 0.35); --cp-danger-solid: #ef4444; --cp-violet: #c4b5fd; --cp-violet-bg: rgba(139, 92, 246, 0.20); --cp-violet-solid: #a78bfa; --cp-indigo: #a5b4fc; --cp-indigo-bg: rgba(99, 102, 241, 0.20); --cp-indigo-solid: #818cf8; --cp-blue: #93c5fd; --cp-blue-bg: rgba(59, 130, 246, 0.20); --cp-blue-solid: #60a5fa; --cp-orange: #fdba74; --cp-orange-bg: rgba(249, 115, 22, 0.20); --cp-orange-solid: #fb923c; --cp-pink: #fda4af; --cp-pink-bg: rgba(244, 63, 94, 0.20); --cp-pink-solid: #fb7185; --cp-fuchsia: #f0abfc; --cp-fuchsia-bg:rgba(192, 38, 211, 0.20); --cp-fuchsia-solid:#e879f9; } /* CP fields keep the CP palette in dark mode. Without this the app-wide `body.dark-theme input, textarea, select` rule further down repaints every CP field with the generic app grey (#1a1a1a on a #161819 card — the box all but disappears). Two classes deep, so it outranks that rule. */ body.dark-theme .cp-root input:not([type="checkbox"]):not([type="radio"]), body.dark-theme .cp-root textarea, body.dark-theme .cp-root select { background-color: var(--cp-wash) !important; border-color: var(--cp-border) !important; color: var(--cp-body-strong) !important; } body.dark-theme .cp-root input::placeholder, body.dark-theme .cp-root textarea::placeholder { color: var(--cp-faint) !important; } /* Date/time pickers ship a black calendar glyph that vanishes on a dark plate. */ body.dark-theme .cp-root input[type="date"]::-webkit-calendar-picker-indicator, body.dark-theme .cp-root input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.65); } /* Checkboxes/radios default to the OS light chrome on a dark card. */ body.dark-theme .cp-root input[type="checkbox"], body.dark-theme .cp-root input[type="radio"] { accent-color: var(--cp-teal); } /* The CP drop-down list inherits the OS widget, which on Windows renders white-on-white unless the options are painted too. */ body.dark-theme select.cp-select option { background: #1b1e20; color: #e5e7eb; }