@layer base, layout, components, utilities;

@layer base {
  :root {
    color-scheme: light;
    --bg-app: #f8fafc;
    --bg-surface: #ffffff;
    --bg-subtle: #f1f5f9;
    --bg-sidebar: #ffffff;
    --ink-primary: #0f172a;
    --ink-secondary: #334155;
    --ink-muted: #475569;
    --border-light: #e2e8f0;
    --border-strong: #cbd5e1;
    --brand-primary: #0f5338;
    --brand-primary-hover: #0a3d28;
    --brand-soft: #ecfdf5;
    --brand-border: #a7f3d0;
    --danger-primary: #991b1b;
    --danger-soft: #fef2f2;
    --warn-primary: #92400e;
    --warn-soft: #fffbeb;
    --info-primary: #1e40af;
    --info-soft: #eff6ff;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.18);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    background: var(--bg-app);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--ink-primary);
  }

  p {
    margin: 0;
  }

  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.84em;
    background: var(--bg-subtle);
    color: var(--ink-primary);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 120ms;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }
}

@layer layout {
  .app-root {
    min-height: 100dvh;
  }

  /* Écran de connexion centré façon Ghost / Linear */
  .login-screen {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at 50% 0%, #ecfdf5 0%, #f8fafc 65%);
  }

  .login-card {
    width: 100%;
    max-width: 430px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .login-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--brand-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .login-kicker {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-primary);
  }

  .login-brand h1 {
    font-size: 1.35rem;
  }

  .login-help {
    font-size: 0.88rem;
    color: var(--ink-secondary);
  }

  .login-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .login-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  /* Layout principal : Sidebar gauche (Ghost) + Canvas principal (Linear) */
  .workspace-shell:not([hidden]) {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100dvh;
  }

  .app-sidebar {
    background: var(--bg-sidebar);
    border-inline-end: 1px solid var(--border-light);
    padding: 1.15rem 0.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }

  .sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.2rem 0.35rem;
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .brand-text strong {
    font-size: 0.98rem;
    color: var(--ink-primary);
  }

  .brand-text span {
    font-size: 0.76rem;
    color: var(--ink-muted);
  }

  .sidebar-cmd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--bg-subtle);
    color: var(--ink-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.48rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-align: start;
  }

  .sidebar-cmd-trigger:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: #e2e8f0;
  }

  .sidebar-cmd-trigger kbd {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0.08rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-primary);
  }

  .btn-new-post {
    width: 100%;
    justify-content: center;
    padding: 0.58rem 0.85rem;
    font-size: 0.86rem;
  }

  .workspace-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin-block-start: 0.25rem;
  }

  .tab-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.52rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-secondary);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
  }

  .tab-btn:hover:not(.active) {
    background: var(--bg-subtle);
    color: var(--ink-primary);
  }

  .tab-btn.active {
    background: var(--brand-soft);
    color: var(--brand-primary);
    border-color: var(--brand-border);
  }

  .tab-icon {
    font-size: 0.95rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
  }

  .tab-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-badge {
    background: var(--bg-subtle);
    color: var(--ink-secondary);
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .tab-btn.active .tab-badge {
    background: var(--brand-primary);
    color: #ffffff;
  }

  .sidebar-footer {
    border-block-start: 1px solid var(--border-light);
    padding-block-start: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .user-card {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #16a34a;
    margin-block-start: 0.35rem;
    flex-shrink: 0;
  }

  .user-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
  }

  .identity-pill {
    font-size: 0.8rem;
    color: var(--ink-primary);
    word-break: break-word;
  }

  .telemetry-sub {
    font-size: 0.72rem;
    color: var(--ink-muted);
  }

  .sidebar-footer-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  /* Zone principale */
  .app-main {
    padding: 1.5rem 2rem 2.5rem;
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
    min-width: 0;
  }

  .canvas-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1.15rem;
  }

  .canvas-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
  }

  .canvas-subtitle {
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin-block-start: 0.15rem;
  }

  .canvas-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
  }
}

@layer components {
  /* Formulaires & Boutons */
  label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-secondary);
  }

  input,
  textarea,
  select {
    width: 100%;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--ink-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.68rem;
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  button:focus-visible,
  a:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
  }

  textarea {
    min-height: 70px;
    resize: vertical;
  }

  :where(button) {
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.48rem 0.85rem;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: var(--brand-primary);
    color: #ffffff;
    transition: background-color 0.14s ease, border-color 0.14s ease;
  }

  :where(button):hover:not(:disabled) {
    background: var(--brand-primary-hover);
  }

  .btn-primary {
    background: var(--brand-primary);
    color: #ffffff;
  }

  .btn-secondary {
    background: #1e293b;
    color: #ffffff;
  }

  .btn-secondary:hover:not(:disabled) {
    background: #0f172a;
  }

  .btn-outline {
    background: var(--bg-surface);
    color: var(--ink-primary);
    border-color: var(--border-strong);
  }

  .btn-outline:hover:not(:disabled) {
    background: var(--bg-subtle);
  }

  .btn-danger {
    background: var(--danger-primary);
    color: #ffffff;
  }

  .btn-danger:hover:not(:disabled) {
    background: #7f1d1d;
  }

  .btn-sm {
    padding: 0.34rem 0.65rem;
    font-size: 0.78rem;
  }

  .btn-full {
    width: 100%;
    justify-content: center;
  }

  .btn-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .export-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--ink-primary);
    border: 1px solid var(--border-strong);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
  }

  .export-link-btn:hover {
    background: #e2e8f0;
  }

  /* Barre de notification */
  .feedback-bar:empty {
    display: none;
  }

  .feedback-bar {
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    color: #064e3b;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    margin-block-end: 1rem;
  }

  .error-banner:empty {
    display: none;
  }

  .error-banner {
    background: var(--danger-soft);
    border: 1px solid #fecaca;
    color: var(--danger-primary);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
  }

  /* Sélecteur Kanban / Liste (façon Linear) */
  .pipeline-view-switcher,
  .digest-view-switcher {
    display: inline-flex;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    padding: 0.18rem;
    border-radius: var(--radius-sm);
    gap: 0.18rem;
  }

  .view-switch-btn,
  .view-mode-btn {
    background: transparent;
    color: var(--ink-secondary);
    border: none;
    padding: 0.32rem 0.68rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 4px;
  }

  .view-switch-btn:hover:not(.active),
  .view-mode-btn:hover:not(.active) {
    background: rgba(15, 23, 42, 0.05);
    color: var(--ink-primary);
  }

  .view-switch-btn.active,
  .view-mode-btn.active {
    background: var(--bg-surface);
    color: var(--ink-primary);
    box-shadow: var(--shadow-xs);
  }

  /* Ruban KPI compact (filtres d'étapes) */
  .kpi-ribbon {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
    margin-block-end: 1rem;
  }

  .kpi-card {
    background: var(--bg-surface);
    color: var(--ink-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    text-align: start;
    box-shadow: var(--shadow-xs);
  }

  button.kpi-card:hover:not(:disabled) {
    background: var(--bg-surface);
    border-color: var(--brand-primary);
  }

  button.kpi-card.active {
    border-color: var(--brand-primary);
    background: var(--brand-soft);
  }

  .kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }

  .kpi-value {
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--ink-primary);
    line-height: 1.15;
  }

  .kpi-meta {
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-weight: 500;
  }

  /* Barre de recherche & filtres horizontale (Ghost Posts) */
  .filter-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-end: 1.1rem;
    box-shadow: var(--shadow-xs);
  }

  .filter-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    flex-wrap: wrap;
  }

  .filter-search-wrap {
    flex: 1 1 240px;
    margin: 0;
  }

  .filter-select-wrap {
    flex: 0 1 180px;
    margin: 0;
  }

  .filter-bar-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .filter-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-muted);
  }

  /* Tiroir de création repliable */
  .composer-drawer {
    margin-block-end: 1.15rem;
  }

  .composer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1.15rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .composer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border-block-end: 1px solid var(--border-light);
    padding-block-end: 0.65rem;
  }

  .composer-grid-main {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1rem;
    align-items: start;
  }

  .composer-col-left,
  .composer-col-right {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .form-row-3,
  .form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }

  .advanced-composer-details {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
  }

  .advanced-composer-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-secondary);
  }

  .source-inspector {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    color: var(--ink-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-block-start: 0.45rem;
  }

  /* =========================================================================
     VUE KANBAN (4 COLONNES FAÇON LINEAR BOARD) & VUE LISTE (FAÇON GHOST POSTS)
     ========================================================================= */

  .drafts-container.view-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: start;
  }

  .kanban-column {
    background: #f1f5f9;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 420px;
  }

  .kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.25rem 0.45rem;
    border-block-end: 1px solid var(--border-light);
  }

  .kanban-col-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-primary);
  }

  .col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .col-dot.dot-DRAFT_AI {
    background: #d97706;
  }
  .col-dot.dot-REVIEW_REQUIRED {
    background: #2563eb;
  }
  .col-dot.dot-APPROVED {
    background: #0d9488;
  }
  .col-dot.dot-PUBLISHED {
    background: #16a34a;
  }

  .kanban-col-count {
    background: var(--bg-surface);
    color: var(--ink-secondary);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 0.05rem 0.48rem;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .kanban-col-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .kanban-empty {
    font-size: 0.78rem;
    color: var(--ink-muted);
    text-align: center;
    padding: 1.5rem 0.5rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
  }

  /* Vue Liste (façon Ghost Admin Posts) */
  .drafts-container.view-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  /* Carte de publication épurée (commune Kanban & Liste) */
  article.draft-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.85rem 0.95rem;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
  }

  article.draft-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
  }

  .draft-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .status-DRAFT_AI {
    background: #fef3c7;
    color: #92400e;
  }

  .status-REVIEW_REQUIRED {
    background: #dbeafe;
    color: #1e40af;
  }

  .status-APPROVED {
    background: #ccfbf1;
    color: #115e59;
  }

  .status-PUBLISHED {
    background: #dcfce7;
    color: #166534;
  }

  .status-RETRACTED {
    background: #fee2e2;
    color: #991b1b;
  }

  .user-need-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.14rem 0.52rem;
    font-size: 0.71rem;
    font-weight: 700;
  }

  .user-need-pill[data-need="DEADLINE_ALERT"] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  .user-need-pill[data-need="COMPLIANCE_SHIELD"] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
  }

  .user-need-pill[data-need="FINANCIAL_ARBITRAGE"] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }

  .user-need-pill[data-need="TERRITORIAL_ORG"] {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
  }

  .reading-time-pill,
  .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--bg-subtle);
    color: var(--ink-secondary);
    border-radius: 999px;
    padding: 0.12rem 0.48rem;
    font-size: 0.7rem;
    font-weight: 600;
  }

  .score-pill {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
  }

  .draft-title-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--ink-primary);
    text-align: start;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    display: block;
    width: 100%;
  }

  .draft-title-btn:hover:not(:disabled) {
    background: transparent;
    color: var(--brand-primary);
    text-decoration: underline;
  }

  .draft-card h3 {
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .applicability-ribbon {
    background: var(--bg-subtle);
    border-inline-start: 3px solid var(--brand-primary);
    border-radius: 4px;
    padding: 0.3rem 0.55rem;
    font-size: 0.73rem;
    color: var(--ink-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .draft-meta-line {
    font-size: 0.75rem;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

  /* Barre de contrôle Audio 45s compacte & vérifiable (jamais tronquée en Kanban) */
  .audio-flash-bar {
    background: #0f172a;
    color: #f8fafc;
    border-radius: var(--radius-sm);
    padding: 0.42rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
  }

  .view-kanban .audio-flash-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.32rem;
  }

  .audio-flash-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .view-kanban .audio-wave-track {
    display: none !important;
  }

  .audio-flash-btn {
    background: #10b981;
    color: #052e16;
    border: none;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.71rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .view-kanban .audio-flash-btn {
    padding: 0.18rem 0.42rem;
    font-size: 0.65rem;
  }

  .audio-flash-btn:hover:not(:disabled) {
    background: #34d399;
  }

  .audio-wave-track {
    flex: 1 1 28px;
    min-width: 24px;
    height: 4px;
    background: #334155;
    border-radius: 999px;
    overflow: hidden;
  }

  .audio-wave-fill {
    width: 0%;
    height: 100%;
    background: #34d399;
    transition: width 0.25s linear;
  }

  .audio-timer {
    font-size: 0.68rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    background-color: #0f172a;
    color: #f8fafc;
    padding: 0.1rem 0.28rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .view-kanban .audio-timer {
    font-size: 0.64rem;
    padding: 0.08rem 0.2rem;
  }

  .audio-flash-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.22rem;
    flex-wrap: wrap;
  }

  .view-kanban .audio-flash-right {
    width: 100%;
    padding-block-start: 0.25rem;
    border-block-start: 1px solid #1e293b;
  }

  .view-kanban .audio-voice-select,
  .view-kanban .audio-speed-btn,
  .view-kanban .audio-verify-btn {
    font-size: 0.64rem;
    padding: 0.14rem 0.34rem;
  }

  .audio-speed-btn {
    background: #1e293b;
    color: #f8fafc;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 0.14rem 0.4rem;
    font-size: 0.69rem;
    font-weight: 700;
  }

  .audio-speed-btn:hover:not(:disabled) {
    background: #334155;
  }

  .audio-verify-btn {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 0.14rem 0.45rem;
    font-size: 0.69rem;
    font-weight: 600;
  }

  .audio-verify-btn.verified {
    background: #065f46;
    color: #ecfdf5;
    border-color: #10b981;
  }

  /* Tiroir repliable pour tester le sondage lecteur 1-clic sans polluer la carte */
  .poll-preview-details {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    padding: 0.32rem 0.55rem;
    font-size: 0.75rem;
  }

  .poll-preview-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-secondary);
    user-select: none;
  }

  .intent-poll-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.65rem;
    margin-block-start: 0.45rem;
  }

  .intent-poll-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-primary);
    margin-block-end: 0.15rem;
  }

  .intent-poll-question {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin-block-end: 0.45rem;
  }

  .intent-poll-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .intent-poll-option-btn {
    width: 100%;
    background: var(--bg-subtle);
    color: var(--ink-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.38rem 0.55rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.22rem;
    text-align: start;
  }

  .intent-poll-option-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: var(--brand-primary);
  }

  .intent-poll-option-btn.voted {
    background: var(--brand-soft);
    border-color: var(--brand-primary);
  }

  .intent-poll-option-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    width: 100%;
  }

  .intent-poll-bar-track {
    width: 100%;
    height: 5px;
    background: #cbd5e1;
    border-radius: 999px;
    overflow: hidden;
  }

  .intent-poll-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 999px;
  }

  .intent-poll-receipt {
    margin-block-start: 0.4rem;
    font-size: 0.73rem;
    font-weight: 600;
    color: #065f46;
    background: var(--brand-soft);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
  }

  /* Pied de carte avec actions claires */
  .draft-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-block-start: 0.45rem;
    border-block-start: 1px solid var(--border-light);
  }

  .reject-note {
    background: var(--danger-soft);
    border-inline-start: 3px solid var(--danger-primary);
    color: var(--danger-primary);
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
  }

  .ai-warn {
    background: var(--warn-soft);
    border-inline-start: 3px solid var(--warn-primary);
    color: var(--warn-primary);
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    font-size: 0.75rem;
  }

  /* =========================================================================
     BREVI-METER (AXIOS HQ) & SUGGESTEUR DE 3 TITRES IA (RING LAB)
     ========================================================================= */
  .label-with-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .label-tools-right {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .brevi-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #dcfce7;
    color: #14532d;
  }

  .brevi-pill.brevi-TOO_SHORT {
    background: #fef3c7;
    color: #78350f;
  }

  .brevi-pill.brevi-TOO_LONG,
  .brevi-pill.brevi-DENSE {
    background: #fee2e2;
    color: #7f1d1d;
  }

  .btn-lab-trigger {
    background: #f5f3ff;
    color: #4c1d95;
    border: 1px solid #c4b5fd;
    padding: 0.16rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
  }

  .btn-lab-trigger:hover:not(:disabled) {
    background: #ede9fe;
  }

  .headline-lab-drawer {
    background: #faf5ff;
    border: 1px solid #d8b4fe;
    border-radius: var(--radius-sm);
    padding: 0.7rem;
    margin-block-top: 0.35rem;
  }

  .headline-lab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-block-start: 0.5rem;
  }

  .headline-variant-card {
    background: var(--bg-surface);
    border: 1px solid #e9d5ff;
    border-radius: var(--radius-sm);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.4rem;
  }

  .headline-variant-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #5b21b6;
  }

  /* =========================================================================
     STUDIO D'ÉDITION PLEIN ÉCRAN (2 VOLETS : ÉCRITURE + VÉRIFICATION AUDIO/SOURCE)
     ========================================================================= */
  dialog:modal {
    overscroll-behavior: contain;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .studio-dialog {
    width: min(1220px, 95vw);
    max-height: 92dvh;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 0;
    background: var(--bg-surface);
    color: var(--ink-primary);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .studio-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .studio-form {
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
    overflow: hidden;
  }

  .studio-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.35rem;
    border-block-end: 1px solid var(--border-light);
    background: var(--bg-surface);
    flex-shrink: 0;
  }

  .studio-hdr h2 {
    font-size: 1.08rem;
  }

  .eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary);
  }

  .studio-body {
    padding: 1rem 1.35rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .studio-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 1.35rem;
    align-items: start;
  }

  .studio-editor-pane {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .studio-sidebar-pane {
    background: var(--bg-app);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .studio-side-block {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .studio-side-block h4 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-primary);
  }

  .brevi-overview-bar {
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #064e3b;
  }

  .audio-script-preview {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    font-size: 0.76rem;
    color: var(--ink-secondary);
    line-height: 1.45;
  }

  /* =========================================================================
     AUTRES VUES : SUJETS SUGGÉRÉS, NEWSLETTER MULTI-CANAL, SOURCES, IMPACT
     ========================================================================= */
  .briefs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.9rem;
  }

  .brief-card,
  .gov-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .digest-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
  }

  .eligible-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .eligible-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
    background: var(--bg-subtle);
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    font-weight: 400;
  }

  .eligible-item input {
    width: auto;
    margin-block-start: 0.2rem;
  }

  .digest-preview-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1.15rem;
    box-shadow: var(--shadow-xs);
  }

  .newsletter-sheet {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
    transition: max-width 0.2s ease;
    margin: 0 auto;
  }

  .newsletter-sheet.view-email {
    max-width: 680px;
    box-shadow: var(--shadow-sm);
  }

  .newsletter-sheet.view-mobile {
    max-width: 390px;
    border: 6px solid #1e293b;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
  }

  .email-envelope-hdr {
    background: var(--bg-subtle);
    border-block-end: 1px solid var(--border-strong);
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    color: var(--ink-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .newsletter-banner {
    background: var(--brand-primary);
    color: #ffffff;
    padding: 1.15rem 1.25rem;
  }

  .newsletter-banner .eyebrow {
    color: #a7f3d0;
  }

  .newsletter-banner h4 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-block: 0.2rem;
  }

  .newsletter-section {
    padding: 1rem 1.25rem;
    border-block-end: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .koenig-callout-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    font-size: 0.83rem;
    color: #1e3a8a;
  }

  .gov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .gov-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .gov-item,
  .sb-item {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
  }

  .audit-table-wrap {
    overflow-x: auto;
  }

  .audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.79rem;
  }

  .audit-table th,
  .audit-table td {
    text-align: start;
    padding: 0.5rem 0.65rem;
    border-block-end: 1px solid var(--border-light);
  }

  .audit-table th {
    background: var(--bg-subtle);
    font-weight: 700;
    color: var(--ink-secondary);
  }

  /* Palette de commandes Cmd+K (Linear) */
  .cmd-palette-dialog {
    width: min(640px, 94vw);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 0;
    background: var(--bg-surface);
    color: var(--ink-primary);
    box-shadow: var(--shadow-lg);
    overscroll-behavior: contain;
  }

  .cmd-palette-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
  }

  .cmd-palette-box {
    display: flex;
    flex-direction: column;
    max-height: 80dvh;
  }

  .cmd-palette-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--border-light);
  }

  .cmd-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary);
  }

  .cmd-palette-hdr h2 {
    font-size: 0.98rem;
  }

  .cmd-search-row {
    padding: 0.65rem 1rem;
    border-block-end: 1px solid var(--border-light);
  }

  .cmd-palette-list {
    padding: 0.5rem;
    overflow-y: auto;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .cmd-category-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    padding: 0.35rem 0.5rem 0.15rem;
  }

  .cmd-item {
    width: 100%;
    background: transparent;
    color: var(--ink-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.48rem 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    text-align: start;
  }

  .cmd-item:hover:not(:disabled),
  .cmd-item.active {
    background: var(--brand-soft);
    border-color: var(--brand-border);
    color: var(--ink-primary);
  }

  .cmd-item-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .cmd-item-title {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ink-primary);
  }

  .cmd-item-sub {
    font-size: 0.73rem;
    color: var(--ink-muted);
  }

  .cmd-item-shortcut {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--bg-subtle);
    color: var(--ink-secondary);
    padding: 0.12rem 0.42rem;
    border-radius: 4px;
    white-space: nowrap;
  }

  .cmd-palette-footer {
    padding: 0.55rem 1rem;
    border-block-start: 1px solid var(--border-light);
    background: var(--bg-subtle);
    display: flex;
    gap: 1rem;
    font-size: 0.73rem;
    color: var(--ink-muted);
  }

  /* =========================================================================
     ÉDITEUR VISUEL WYSIWYG (FAÇON GHOST KOENIG) & STUDIO AUDIO NEURAL HD
     ========================================================================= */

  .studio-mode-switcher {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: #e2e8f0;
    padding: 0.22rem;
    border-radius: var(--radius-sm);
    gap: 0.22rem;
    width: 100%;
  }

  .studio-mode-btn {
    background: transparent;
    color: #1e293b;
    border: none;
    padding: 0.34rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .studio-mode-btn.active {
    background: #ffffff;
    color: #064e3b;
    box-shadow: var(--shadow-xs);
  }

  .wysiwyg-editor-shell {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .wysiwyg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    background: #f8fafc;
    border-block-end: 1px solid var(--border-light);
  }

  .wysiwyg-tool-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .wysiwyg-tool-btn {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
  }

  .wysiwyg-tool-btn:hover {
    background: #e2e8f0;
  }

  .wysiwyg-card-btn {
    background: #ecfdf5;
    color: #064e3b;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .wysiwyg-card-btn:hover {
    background: #d1fae5;
  }

  .wysiwyg-canvas,
  .wysiwyg-rendered-view {
    padding: 1.25rem 1.5rem;
    min-height: 340px;
    max-height: 620px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.68;
    color: #0f172a;
    outline: none;
  }

  .reader-preview-sheet .wysiwyg-rendered-view {
    max-height: none;
    padding: 0.5rem 0;
  }

  .wysiwyg-canvas:focus {
    background: #fcfdfd;
    box-shadow: inset 0 0 0 2px #10b981;
  }

  .wysiwyg-canvas h2,
  .wysiwyg-rendered-view h2 {
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    margin: 1.35rem 0 0.55rem;
    border-block-end: 2px solid #e2e8f0;
    padding-block-end: 0.35rem;
    letter-spacing: -0.01em;
  }

  .wysiwyg-canvas h3,
  .wysiwyg-rendered-view h3 {
    font-size: 1.01rem;
    font-weight: 700;
    color: #065f46;
    margin: 1rem 0 0.35rem;
  }

  .wysiwyg-canvas ul,
  .wysiwyg-rendered-view ul {
    margin: 0.45rem 0 0.75rem;
    padding-inline-start: 1.35rem;
  }

  .wysiwyg-canvas li,
  .wysiwyg-rendered-view li {
    margin: 0.28rem 0;
  }

  .koenig-summary-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #6ee7b7;
    border-inline-start: 4px solid #059669;
    border-radius: 10px;
    padding: 0.95rem 1.15rem;
    margin: 0 0 1rem;
  }

  .koenig-summary-title {
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #065f46;
    margin: 0 0 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .koenig-summary-box ul {
    margin: 0;
    padding-inline-start: 1.2rem;
    color: #064e3b;
    font-size: 0.91rem;
  }

  .koenig-toc {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1.1rem;
    font-size: 0.86rem;
  }

  .koenig-toc strong {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin-block-end: 0.35rem;
  }

  .koenig-toc ol {
    margin: 0;
    padding-inline-start: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.2rem 1rem;
    color: #0f172a;
    font-weight: 600;
  }

  .koenig-example {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-inline-start: 4px solid #2563eb;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin: 0.85rem 0;
    color: #1e3a8a;
    font-size: 0.9rem;
  }

  .koenig-example strong {
    color: #1d4ed8;
  }

  .koenig-table-wrap {
    margin: 0.95rem 0;
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
  }

  .koenig-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    line-height: 1.45;
  }

  .koenig-table th {
    background: #0f172a;
    color: #ffffff;
    font-weight: 700;
    text-align: start;
    padding: 0.6rem 0.75rem;
    border-block-end: 2px solid #10b981;
  }

  .koenig-table td {
    padding: 0.55rem 0.75rem;
    border-block-end: 1px solid #e2e8f0;
    color: #1e293b;
    vertical-align: top;
  }

  .koenig-table tr:nth-child(even) td {
    background: #f8fafc;
  }

  .koenig-faq {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.85rem 0;
  }

  .koenig-faq-item {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem 0.95rem;
    background: #f8fafc;
  }

  .koenig-faq-item h4 {
    margin: 0 0 0.3rem;
    font-size: 0.93rem;
    font-weight: 700;
    color: #0f172a;
  }

  .koenig-faq-item p {
    margin: 0;
    font-size: 0.88rem;
    color: #334155;
  }

  .wysiwyg-canvas p,
  .wysiwyg-rendered-view p {
    margin: 0.45rem 0;
  }

  .wysiwyg-lead {
    font-size: 0.98rem;
    color: #0f172a;
    background: #f8fafc;
    border-inline-start: 3px solid #064e3b;
    padding: 0.5rem 0.75rem;
    border-radius: 0 6px 6px 0;
  }

  .koenig-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    margin: 0.75rem 0;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
  }

  .koenig-callout {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #064e3b;
  }

  .koenig-deadline {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
  }

  .koenig-keystat {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
    align-items: center;
  }

  .koenig-stat-number {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1d4ed8;
    padding-inline-end: 0.5rem;
    border-inline-end: 2px solid #93c5fd;
  }

  .koenig-cta-card {
    flex-direction: column;
    gap: 0.25rem;
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #4c1d95;
  }

  .koenig-callout-icon {
    font-size: 1.15rem;
    line-height: 1.2;
  }

  .koenig-callout-body p {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
  }

  .koenig-quote {
    margin: 0.75rem 0;
    padding: 0.5rem 0.85rem;
    border-inline-start: 3px solid #475569;
    background: #f1f5f9;
    color: #1e293b;
    font-size: 0.84rem;
    font-style: italic;
    border-radius: 0 6px 6px 0;
  }

  .wysiwyg-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-block-start: 1px solid var(--border-light);
  }

  .structured-fields-pane {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .reader-preview-sheet {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    background: #ffffff;
  }

  .audio-voice-select {
    width: auto;
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: #ffffff;
    color: #0f172a;
  }

  .neural-voice-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    background: #ecfdf5;
    color: #064e3b;
    border: 1px solid #a7f3d0;
  }

  .audio-script-textarea {
    font-size: 0.8rem;
    line-height: 1.45;
    background: #ffffff;
    color: #0f172a;
  }

  /* =========================================================================
     STORY / SLIDESHOW ANIMÉ 45S + EXPORT MP4 (SYNCHRONISÉ VOIX NEURALE HD)
     ========================================================================= */

  .btn-slideshow-trigger {
    background: #064e3b;
    color: #ffffff;
    border: 1px solid #047857;
    font-weight: 700;
  }

  .btn-slideshow-trigger:hover:not(:disabled) {
    background: #065f46;
  }

  .slideshow-player-shell {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .slideshow-player-shell[hidden] {
    display: none !important;
  }

  .slideshow-story-bars {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .slideshow-seg-btn {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #475569;
    border-radius: 8px;
    padding: 0.32rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.22rem;
    font-size: 0.7rem;
    font-weight: 600;
  }

  .slideshow-seg-btn.active {
    background: #064e3b;
    color: #ffffff;
    border-color: #10b981;
  }

  .slideshow-seg-track {
    width: 100%;
    height: 5px;
    background: #334155;
    border-radius: 999px;
    overflow: hidden;
    display: block;
  }

  .slideshow-seg-fill {
    display: block;
    height: 100%;
    background: #34d399;
    border-radius: 999px;
    transition: width 0.25s ease;
  }

  .slideshow-seg-label {
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .slideshow-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-block-end: 0.45rem;
    border-block-end: 1px solid #334155;
  }

  .slideshow-brand-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.73rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.03em;
  }

  .slideshow-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
  }

  .slideshow-step-pill {
    background: #1e293b;
    color: #a7f3d0;
    border: 1px solid #059669;
    border-radius: 999px;
    padding: 0.14rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
  }

  .btn-preview-mp4 {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: #1e293b;
    color: #ffffff;
    border: 1px solid #34d399;
    font-size: 0.74rem;
    font-weight: 700;
  }

  .btn-preview-mp4:hover:not(:disabled) {
    background: #334155;
  }

  .btn-export-mp4 {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    background: #065f46;
    color: #ffffff;
    border: 1px solid #10b981;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
  }

  .btn-export-mp4:hover {
    background: #047857;
    color: #ffffff;
  }

  .slideshow-mp4-box {
    background: #090f1d;
    border: 1px solid #10b981;
    border-radius: 12px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .slideshow-mp4-box[hidden] {
    display: none !important;
  }

  .slideshow-mp4-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    font-weight: 700;
    color: #a7f3d0;
  }

  .slideshow-mp4-video {
    width: 100%;
    max-height: 350px;
    border-radius: 8px;
    background: #000000;
  }

  .slideshow-stage {
    position: relative;
    min-height: 210px;
  }

  .slideshow-card {
    background-color: #1e293b;
    border: 1px solid #475569;
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .slideshow-card[hidden] {
    display: none !important;
  }

  .slideshow-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .slideshow-theme-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: #064e3b;
    color: #ecfdf5;
    border: 1px solid #10b981;
    font-size: 0.74rem;
    font-weight: 700;
  }

  .slideshow-metric-box {
    background: #090f1d;
    border: 1px solid #10b981;
    border-radius: 10px;
    padding: 0.35rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .slideshow-metric-val {
    font-size: 1.08rem;
    font-weight: 800;
    color: #6ee7b7;
    line-height: 1.15;
  }

  .slideshow-metric-lbl {
    font-size: 0.64rem;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.04em;
  }

  .slideshow-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
  }

  .slideshow-body-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #f1f5f9;
    margin: 0;
    background: rgba(15, 23, 42, 0.65);
    border-inline-start: 3px solid #10b981;
    padding: 0.65rem 0.85rem;
    border-radius: 0 8px 8px 0;
  }

  .slideshow-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .slideshow-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.86rem;
    color: #f8fafc;
  }

  .slideshow-check-num {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #065f46;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .slideshow-embedded-poll .intent-poll-card {
    background: #f8fafc;
    color: #0f172a;
    margin-block-start: 0.2rem;
  }

  .slideshow-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid #334155;
    font-size: 0.73rem;
    color: #cbd5e1;
  }

  .slideshow-caption-box {
    background: #090f1d;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .slideshow-caption-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .slideshow-voice-pill {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6ee7b7;
  }

  .slideshow-timer-text {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: #e2e8f0;
  }

  .slideshow-caption-text {
    margin: 0;
    font-size: 0.83rem;
    color: #f8fafc;
    font-style: italic;
    line-height: 1.4;
  }

  .slideshow-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .btn-slideshow-play {
    background: #047857;
    color: #ffffff;
    border: 1px solid #34d399;
    padding: 0.42rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .btn-slideshow-play:hover:not(:disabled) {
    background: #065f46;
  }

  .slideshow-controls-bar .btn-outline {
    background: #1e293b;
    color: #f8fafc;
    border-color: #64748b;
  }

  .slideshow-controls-bar .btn-outline:hover:not(:disabled) {
    background: #334155;
  }

  .slideshow-voice-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #f8fafc;
    font-weight: 600;
  }

  .slideshow-voice-label select {
    width: auto;
    padding: 0.24rem 0.5rem;
    font-size: 0.74rem;
    background: #1e293b;
    color: #ffffff;
    border: 1px solid #64748b;
  }

  /* =========================================================================
     RÉVISIONS & HISTORIQUE DES ARTICLES (TIME-MACHINE), SOURCES CROISÉES,
     RADAR OFFICIEL & BARRE D'EXPORT DOSSIER PRATICIEN (PDF / MD)
     ========================================================================= */

  .studio-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.42rem;
    margin-inline-start: 0.25rem;
    border-radius: 999px;
    background: #064e3b;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
  }

  .studio-dossier-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
  }

  .studio-dossier-meta {
    font-size: 0.76rem;
    color: #064e3b;
  }

  .studio-dossier-btns {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
  }

  .revisions-pane {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.85rem 1rem;
  }

  .revisions-pane[hidden] {
    display: none !important;
  }

  .revisions-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-block-end: 0.65rem;
    border-block-end: 1px solid var(--border-light);
  }

  .revisions-pane-header h4 {
    margin: 0 0 0.2rem;
    font-size: 0.96rem;
    color: #0f172a;
  }

  .revisions-active-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #064e3b;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
  }

  .revisions-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .revision-item {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-inline-start: 4px solid #64748b;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .revision-item.is-latest {
    border-color: #86efac;
    border-inline-start-color: #059669;
    background: #f0fdf4;
  }

  .revision-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .revision-item-badges {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
  }

  .revision-ver-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .revision-delta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
  }

  .revision-delta-pill.pos {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
  }

  .revision-delta-pill.neg {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
  }

  .revision-time {
    font-size: 0.73rem;
    color: #475569;
    font-family: var(--font-mono);
  }

  .revision-item-summary {
    margin: 0;
    font-size: 0.85rem;
    color: #0f172a;
  }

  .revision-item-meta {
    margin: 0;
    font-size: 0.75rem;
    color: #475569;
  }

  .revision-item-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-block-start: 0.25rem;
  }

  .revision-diff-card {
    background: #ffffff;
    border: 2px solid #059669;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .revision-diff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: #064e3b;
  }

  .revision-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
  }

  .revision-diff-table th,
  .revision-diff-table td {
    border: 1px solid #cbd5e1;
    padding: 0.45rem 0.6rem;
    text-align: start;
    vertical-align: top;
  }

  .revision-diff-table th {
    background: #f1f5f9;
    font-weight: 700;
    color: #0f172a;
  }

  .revision-diff-table tr.diff-changed td {
    background: #fffbeb;
  }

  .revision-diff-table td.diff-old {
    color: #991b1b;
    background: #fef2f2;
  }

  .revision-diff-table td.diff-new {
    color: #065f46;
    background: #ecfdf5;
    font-weight: 600;
  }

  .revision-html-preview {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.82rem;
  }

  .studio-sources-card {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
  }

  .studio-sources-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-block-start: 0.35rem;
  }

  .studio-source-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.76rem;
  }

  .studio-source-row.primary {
    border-inline-start: 3px solid #064e3b;
    background: #f0fdf4;
  }

  .studio-source-row p {
    margin: 0;
    color: #475569;
    font-size: 0.72rem;
  }

  .complementary-sources-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    margin: 0.4rem 0;
  }

  .complementary-sources-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #0f172a;
    margin-block-end: 0.45rem;
  }

  .complementary-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.45rem;
  }

  .comp-source-chip {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.74rem;
  }

  .comp-source-chip.is-recommended {
    border-color: #86efac;
    background: #f0fdf4;
  }

  .comp-source-chip input[type="checkbox"] {
    width: auto;
    margin-block-start: 0.15rem;
  }

  .comp-source-chip-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .comp-source-chip-body small {
    color: #475569;
    font-size: 0.69rem;
    line-height: 1.25;
  }

  .comp-rec-tag {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #064e3b;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
  }

  .comp-sources-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #064e3b;
    border: 1px solid #a7f3d0;
    font-size: 0.68rem;
    font-weight: 700;
  }

  .radar-signals-box {
    background: #f8fafc;
    border: 1px solid #93c5fd;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-block-end: 1rem;
  }

  .radar-signals-box[hidden] {
    display: none !important;
  }

  .radar-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block-end: 0.65rem;
    padding-block-end: 0.45rem;
    border-block-end: 1px solid #cbd5e1;
  }

  .radar-signals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.65rem;
  }

  .radar-signal-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
  }

  .radar-signal-card h4 {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    color: #0f172a;
  }
}

/* Directional Navigation View Transitions (forward / backward) */
@keyframes slide-to-left {
  to {
    transform: translateX(-14px);
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(14px);
  }
}

@keyframes slide-to-right {
  to {
    transform: translateX(14px);
  }
}

@keyframes slide-from-left {
  from {
    transform: translateX(-14px);
  }
}

::view-transition-group(root) {
  animation: 0.08s ease-in-out both;
}

html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}

html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}

html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

@layer utilities {
  .meta {
    font-size: 0.78rem;
    color: var(--ink-muted);
  }

  .muted-note {
    font-size: 0.85rem;
    color: var(--ink-muted);
    padding: 1.5rem;
    text-align: center;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Indicateur d'attente discret pour les opérations métier (Collecte RAG officielle + Génération IA 120B) */
  .pratinium-activity-pill {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(440px, calc(100vw - 2rem));
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.35), 0 4px 10px -4px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(8px);
    font-size: 0.78rem;
    line-height: 1.3;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .pratinium-activity-pill[hidden] {
    display: none !important;
  }

  .pratinium-activity-pill.is-done {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(6, 78, 59, 0.95);
  }

  .pratinium-activity-pill.is-error {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(127, 29, 29, 0.95);
  }

  .activity-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.28);
    border-top-color: #38bdf8;
    flex-shrink: 0;
    animation: pratiniumSpin 0.8s linear infinite;
  }

  .pratinium-activity-pill.is-done .activity-spinner {
    animation: none;
    border-color: #34d399;
    background: #10b981;
  }

  @keyframes pratiniumSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .activity-text-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .activity-title {
    font-weight: 700;
    font-size: 0.76rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .activity-step {
    font-size: 0.7rem;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .activity-elapsed {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    flex-shrink: 0;
  }

  .pratinium-activity-pill.is-done .activity-elapsed {
    color: #a7f3d0;
    background: rgba(16, 185, 129, 0.22);
  }

  /* Responsive Mobile & Tablette (zéro débordement horizontal sur 390×844) */
  @media (max-width: 1120px) {
    .drafts-container.view-kanban {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-split-layout {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 900px) {
    .workspace-shell:not([hidden]) {
      grid-template-columns: 1fr;
    }

    .app-sidebar {
      position: static;
      height: auto;
      border-inline-end: none;
      border-block-end: 1px solid var(--border-light);
      padding: 0.85rem 1rem;
    }

    .workspace-tabs {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .tab-btn {
      width: auto;
      flex: 1 1 auto;
    }

    .app-main {
      padding: 1rem;
    }

    .kpi-ribbon {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .composer-grid-main,
    .form-row-2,
    .form-row-3,
    .form-grid-3,
    .headline-lab-grid,
    .digest-layout,
    .gov-grid,
    .drafts-container.view-kanban {
      grid-template-columns: 1fr;
    }
  }
}