:root {
    --paper: #F4F6F8;
    --paper-card: #FFFFFF;
    --paper-sunk: #F7F9FB;
    --ink: #16233C;
    --ink-soft: #57607A;
    --line: #DCE2E9;
    --line-soft: #EBEEF3;
    /* La couleur est réservée aux 4 catégories d'échéance : c'est le seul code que l'œil doit
       apprendre. Tout le reste (encarts d'information, notes) passe en neutre. */
    --pret: #B07A12;
    --pret-bg: #FBEFD9;
    --acte: #2472B0;
    --acte-bg: #E3EEF7;
    --ventebien: #1CA39B;
    --ventebien-bg: #E1F4F2;
    --urgent: #C2410C;
    --success: #2F8F5B;
    --success-bg: #E4F3EB;
    --muted: #8A93A9;
    /* Bleu d'action (boutons primaires, liens, focus, onglet actif) — distinct de --acte (couleur
       réservée à la catégorie d'échéance "acte", ne pas les recoupler même s'ils se ressemblent) :
       demandé par l'étude pour un rendu plus "professionnel" que l'ancien bleu terne (#2472B0). */
    --focus: #2563EB;
    --focus-hover: #1D4ED8;
    --shadow-card: 0 1px 2px rgba(22,35,60,0.04), 0 2px 8px rgba(22,35,60,0.04);
    --shadow-float: 0 8px 28px rgba(22,35,60,0.16);
    /* Panneau "verre" de la sidebar : dégradé légèrement teinté (pas un simple à-plat de
       --paper-card) + flou derrière ce qui défile sous elle en mobile (voir .sidebar-burger /
       .sidebar en position fixed) — la seule vraie translucidité visible, la sidebar desktop étant
       en flux normal sans rien en dessous. */
    --sidebar-bg: linear-gradient(165deg, rgba(255,255,255,0.94) 0%, rgba(246,248,251,0.88) 55%, rgba(228,236,247,0.85) 100%);
    --sidebar-border: rgba(22,35,60,0.08);
    --sidebar-shadow: 4px 0 28px rgba(22,35,60,0.07);
    --sidebar-highlight: rgba(255,255,255,0.7);
    /* Onglet de navigation actif (Tableau de bord/Suivi/Simulateur) : gris foncé neutre, PAS le
       bleu --focus — réservé exclusivement à .sidebar-cta ("Nouveau dossier") pour que ce raccourci
       de création reste le seul élément bleu de la sidebar, demandé explicitement par l'étude. */
    --sidebar-actif-bg: linear-gradient(155deg, #4B5157 0%, #363A3F 100%);
  }

  [data-theme="dark"] {
    --paper: #1E1E1E;
    --paper-card: #2A2A2A;
    --paper-sunk: #242424;
    --ink: #ECECEC;
    --ink-soft: #ABABAB;
    --line: #3D3D3D;
    --line-soft: #333333;
    --pret: #E0A93E;
    --pret-bg: #332B18;
    --acte: #6FAEDB;
    --acte-bg: #263238;
    --ventebien: #4FC2B8;
    --ventebien-bg: #1E322F;
    --urgent: #F08C4B;
    --success: #5FBF87;
    --success-bg: #223026;
    --muted: #8C8C8C;
    /* Surfaces (fond, cartes, encres) restent en gris neutre — décision explicite, voir plus bas
       ("Palette bleue professionnelle"). Seul cet accent devient un bleu plus affirmé que l'ancien
       #6FAEDB, pour rester lisible et "professionnel" sur fond sombre sans virer au navy. */
    --focus: #5B9DF9;
    --focus-hover: #7FB4FB;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
    --shadow-float: 0 8px 28px rgba(0,0,0,0.5);
    --sidebar-bg: linear-gradient(165deg, rgba(46,46,46,0.94) 0%, rgba(30,30,30,0.9) 55%, rgba(36,44,58,0.88) 100%);
    --sidebar-border: rgba(255,255,255,0.07);
    --sidebar-shadow: 4px 0 32px rgba(0,0,0,0.4);
    --sidebar-highlight: rgba(255,255,255,0.09);
    /* Un peu plus clair qu'en mode clair pour rester visible sur le fond de sidebar déjà sombre. */
    --sidebar-actif-bg: linear-gradient(155deg, #5C6369 0%, #454A50 100%);
  }

  * { box-sizing: border-box; }

  /* ---- icônes ----
     Un seul jeu (voir ICONES/icone() dans script.js) : dimensionnées en 1em pour suivre la taille
     de police du bouton/texte qui les contient, -0.15em pour recentrer verticalement sur la ligne
     de base du texte voisin (un SVG s'aligne sinon sur son propre bas, plus bas que le texte). */
  .icone { width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }
  .icone-spin { animation: icone-spin 0.8s linear infinite; }
  @keyframes icone-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .icone-spin { animation-duration: 2.4s; }
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* Fraunces (display serif) retirée de partout SAUF le logo "CLAIRE" (.brand-word, voir plus
     bas) : jugée pas assez professionnelle par l'étude sur les titres/noms de dossier. Les titres
     ("Tableau de bord", "Nouveau dossier", nom de dossier...) restent en Inter, en plus gras que
     le corps de texte pour garder une hiérarchie visuelle, sans changer de famille de police. */
  h1, h2, h3, .serif {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  a { color: var(--focus); }

  .layout-cols {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 1680px;
    margin: 0 auto;
  }

  .wrap {
    flex: 1 1 560px;
    max-width: 680px;
    margin: 0;
    padding: 0 0 60px;
    min-width: 0;
  }

  /* Colonne de droite, dans le flux normal de la page (pas de superposition) : large et lisible,
     elle reste ancrée en haut de l'écran pendant que le formulaire défile à côté. */
  .pdf-viewer {
    display: none;
    flex: 1.15 1 620px;
    min-width: 0;
    position: sticky;
    top: 24px;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px;
    max-height: calc(100vh - 48px);
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(22,35,60,0.07);
  }

  .pdf-viewer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .pdf-viewer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1.4;
  }

  .pdf-viewer-canvas-wrap {
    flex: 1;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 2px;
    padding: 10px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    scroll-behavior: smooth;
  }

  /* ---- panneau d'introduction (étape "Importer", avant tout PDF chargé) ----
     Occupe la même colonne que l'aperçu PDF (#pdf-viewer, voir juste au-dessus), affiché tant
     qu'aucun document n'a été importé — sans lui cette colonne restait entièrement vide sur un
     écran large, ce qui se lisait comme une page inachevée plutôt que sobre (voir CLAUDE.md). Un
     contenu réel plutôt qu'un habillage : ce que l'outil détecte effectivement. */
  .pdf-viewer.nouveau-intro { display: flex; gap: 4px; }
  .nouveau-intro-titre {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 8px;
  }
  .nouveau-intro-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .nouveau-intro-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
  .nouveau-intro-icone {
    display: inline-flex;
    flex: none;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--acte-bg);
    color: var(--acte);
    font-size: 13px;
    margin-top: 1px;
  }
  .nouveau-intro-note {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    margin: auto 0 0;
  }

  .pdf-page-bloc {
    position: relative;
    flex-shrink: 0;
  }

  .pdf-page-bloc canvas {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  }

  .pdf-page-numero {
    text-align: center;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 4px;
  }

  .pdf-highlight {
    position: absolute;
    background: rgba(217, 114, 10, 0.32);
    border: 2px solid var(--urgent);
    border-radius: 2px;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  .pdf-highlight.fondu { opacity: 0; }

  /* Couche de texte invisible mais sélectionnable, posée par-dessus chaque page rendue en canvas
     (voir construireCoucheTexte()/chargerToutesLesPagesPdf() dans script.js) : permet de
     sélectionner une clause à la souris comme dans un vrai lecteur PDF, pour l'ajouter manuellement
     comme engagement du vendeur quand la détection automatique l'a manquée. Chaque <span> reprend
     la position/taille d'un "item" pdf.js (texte transparent, seule la sélection doit être
     visible) — même technique que le lecteur PDF natif de pdf.js (TextLayerBuilder), réécrite ici
     en plus simple faute de charger son module dédié.
  */
  .pdf-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    line-height: 1;
  }
  .pdf-text-layer span {
    position: absolute;
    color: transparent;
    white-space: pre;
    transform-origin: 0% 0%;
    cursor: text;
  }
  .pdf-text-layer span::selection { background: rgba(37, 99, 235, 0.35); }

  .pdf-selection-toolbar {
    position: fixed;
    z-index: 40;
    display: none;
    align-items: center;
    gap: 4px;
    transform: translate(-50%, -100%);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    padding: 5px 6px;
    font-size: 12px;
  }
  .pdf-selection-label { color: var(--muted); padding: 0 4px 0 2px; white-space: nowrap; }
  .pdf-selection-toolbar button {
    font-family: inherit;
    font-size: 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .pdf-selection-toolbar button:hover { border-color: var(--focus); color: var(--focus); }
  .pdf-selection-annuler {
    border: none !important;
    background: none !important;
    color: var(--muted) !important;
    padding: 4px 6px !important;
  }

  .engagement-manuel {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-style: italic;
    color: var(--muted);
    white-space: nowrap;
  }
  .engagement-suppr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 5px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .engagement-suppr:hover { background: var(--paper-sunk); color: var(--urgent); }
  .engagement-suppr .icone { width: 11px; height: 11px; }

  .voir-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: inherit;
    font-size: 11px;
    border: none;
    background: none;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    opacity: 0.8;
  }
  .voir-pdf-btn:hover { opacity: 1; }

  /* Même page indiquée que .voir-pdf-btn, mais sur un dossier déjà enregistré et rouvert plus
     tard : le PDF d'origine n'est plus chargé en mémoire (jamais conservé), donc pas de clic
     possible pour y sauter — seul le numéro de page reste affiché, à titre indicatif. */
  .chip-page {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--ink-soft);
    margin-left: 6px;
  }

  @media (max-width: 1100px) {
    .layout-cols { flex-direction: column; }
    .wrap { max-width: 880px; margin: 0 auto; padding: 0 0 60px; }
    .pdf-viewer {
      order: -1;
      position: static;
      width: calc(100% - 48px);
      max-width: 880px;
      margin: 24px auto 0;
      max-height: 80vh;
    }
  }

  /* ==== Structure générale : sidebar + contenu (remplace l'ancien header pleine page +
     onglets horizontaux) ====
     Un rail fixe à gauche porte la marque CLAIRE, la navigation entre les trois espaces de
     travail (Tableau de bord / Nouveau dossier / Suivi des dossiers) et les actions globales
     (thème, installation) — le contenu à droite n'a donc plus besoin d'un grand bandeau de titre
     au-dessus de chaque onglet. */
  .app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
  }

  /* Sidebar "verre" : dégradé + flou (visible surtout en mobile, où elle passe en overlay fixe
     par-dessus le contenu, voir @media 900px) + ombre portée et liseré de lumière en tête, plutôt
     qu'un aplat uni + bordure plate — demandé pour donner de la profondeur au menu. */
  .sidebar {
    flex: 0 0 252px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 16px;
    background: var(--sidebar-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: var(--sidebar-shadow);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 2;
  }
  .sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sidebar-highlight), transparent);
    pointer-events: none;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 2px;
  }
  .brand-mark { display: inline-flex; flex-shrink: 0; }
  /* Logo "CLAIRE" seul : Montserrat (choisie explicitement par l'étude, après un premier essai en
     Bodoni Moda inspiré d'une référence "Sage" fournie plus tôt) — un sans-serif géométrique, pour
     une marque plus affirmée/moderne que le reste de l'interface, déjà en Inter partout ailleurs
     (voir h1/h2/h3 en tête de fichier). Majuscules resserrées (letter-spacing négatif) : Montserrat
     en gras/tout-capitales a tendance à paraître un peu large sans ce resserrement. */
  .brand-word {
    font-family: 'Montserrat', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .sidebar-tagline {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 2px 0 20px;
    padding: 0 8px;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-radius: 8px;
    padding: 10px 10px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }
  .sidebar-link-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    font-size: 14px;
    opacity: 0.85;
  }
  .sidebar-link:hover { background: var(--paper-sunk); color: var(--ink); transform: translateX(1px); }
  /* Bouton sans libellé texte (mode sombre) : centrer l'icône plutôt que la laisser plaquée à
     gauche d'une rangée sinon vide. */
  .sidebar-link-icone-seule { width: auto; justify-content: center; }
  .sidebar-link-icone-seule .sidebar-link-icone { width: auto; font-size: 17px; }
  /* Lien actif en "pilule de verre" (dégradé + liseré clair en haut + ombre portée) : gris foncé
     neutre (--sidebar-actif-bg), PAS le bleu --focus — l'étude a demandé de réserver le bleu au
     seul bouton "Nouveau dossier" (.sidebar-cta juste après), pour qu'il reste le repère visuel
     unique de la sidebar plutôt qu'une couleur partagée avec l'onglet simplement sélectionné. */
  .sidebar-link.actif {
    background: var(--sidebar-actif-bg);
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  /* .sidebar-cta ("Nouveau dossier") garde le bleu --focus/--focus-hover, en permanence — pas
     seulement quand cet onglet est sélectionné — pour rester un raccourci de création toujours
     visible dans la sidebar, demandé par l'étude. */
  .sidebar-link.sidebar-cta {
    background: linear-gradient(155deg, var(--focus) 0%, var(--focus-hover) 100%);
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .sidebar-link.actif .sidebar-link-icone, .sidebar-link.sidebar-cta .sidebar-link-icone { opacity: 1; }
  /* .sidebar-cta garde sa couleur même au survol (contrairement aux autres liens, qui basculent sur
     --paper-sunk) : un aplat neutre casserait l'effet "toujours en avant" recherché. */
  .sidebar-link.sidebar-cta:hover { background: linear-gradient(155deg, var(--focus-hover) 0%, var(--focus) 100%); color: #fff; }
  .sidebar-link.sidebar-cta { margin-bottom: 6px; }

  .sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar-burger, .sidebar-scrim { display: none; }

  .app-main {
    flex: 1;
    min-width: 0;
    padding: 30px 32px 40px;
  }

  .onglet-panel { max-width: 1680px; margin: 0 auto; }

  /* ---- Tableau de bord : synthèse du portefeuille avant même d'ouvrir un dossier (KPI,
     actions urgentes, échéances proches) — voir renderKpisDashboard/renderActionsUrgentes. ---- */
  .dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .dash-eyebrow {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--focus);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
  }
  .dash-titre { font-size: 26px; margin: 0; }

  /* Recherche de dossier depuis le tableau de bord, regroupée avec "+ Nouveau dossier" (même
     rangée, en haut à droite de l'en-tête) plutôt que flottant seule entre le titre et le bouton —
     demandé par l'étude pour que les deux actions se lisent comme un seul bloc. Contrairement au
     Suivi (recherche-dossiers, qui filtre une liste déjà affichée), le tableau de bord ne montre
     jamais tous les dossiers — un menu de résultats s'ouvre donc sous le champ, chaque ligne menant
     directement au tiroir du dossier (même chemin que "Actions urgentes", voir
     ouvrirDossierDepuisDashboard). Le champ lui-même n'a plus de style propre : il hérite de la
     règle générique des champs de formulaire (voir plus bas, `input[type="search"]` y a été ajouté
     au même titre que `input[type="number"]` en son temps) plutôt qu'une apparence bricolée à part.
  */
  .dash-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .dash-recherche {
    position: relative;
    width: 260px;
    max-width: 100%;
  }
  .dash-recherche-resultats {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
  }
  .dash-recherche-ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 9px 12px;
    cursor: pointer;
    color: var(--ink);
  }
  .dash-recherche-ligne:last-child { border-bottom: none; }
  .dash-recherche-ligne:hover { background: var(--paper-sunk); }
  .dash-recherche-nom { font-weight: 600; flex-shrink: 0; }
  .dash-recherche-resp { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-recherche-vide { padding: 12px; font-size: 13px; color: var(--muted); }

  .kpis-dashboard {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }
  .kpi-tile {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-card);
  }
  .kpi-icone { font-size: 13px; line-height: 1; flex: none; opacity: 0.8; }
  /* Icône calendrier SVG partagée par les deux tuiles d'échéances (7j/15j), le seuil dessiné dans
     le corps du calendrier plutôt que deux emojis différents sans lien visuel entre eux. */
  .kpi-icone-calendrier {
    width: 15px;
    height: 15px;
    color: var(--ink-soft);
  }
  /* .kpi-num-ligne porte le chiffre ET sa tendance côte à côte (voir renderKpisDashboard) — un seul
     conteneur pour toutes les tuiles, avec ou sans tendance à afficher à côté (les 4 tuiles sans
     tendance n'ont qu'un seul enfant, sans changement visuel par rapport à l'ancien .kpi-num seul). */
  .kpi-num-ligne {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .kpi-num {
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .kpi-num.c-urgent { color: var(--urgent); }
  .kpi-num.c-pret { color: var(--pret); }
  .kpi-num.c-neutre { color: var(--ink); }
  /* Tendance du nombre de dossiers actifs vs le mois précédent (voir calculerEvolutionPortefeuille
     dans script.js), à côté du chiffre de la tuile "dossier actif" uniquement — la comparaison à
     l'année précédente reste calculée mais n'est volontairement pas affichée pour l'instant (voir
     renderKpisDashboard). Pas de couleur succès/alerte sur la hausse ou la baisse : plus de
     dossiers n'est ni bon ni mauvais en soi pour l'étude (juste plus de charge), donc gris neutre
     dans les deux sens — seule l'icône (flèche haut/bas) porte le sens de variation. */
  .kpi-tendance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .kpi-tendance-icone { width: 11px; height: 11px; flex: none; }
  /* Libellé au-dessus du chiffre (on lit ce que c'est, puis combien), en petites capitales
     espacées : la même "étiquette" que les intitulés de section de la fiche dossier, pour que
     toutes les tuiles se lisent d'un coup d'œil. La hauteur minimale vaut deux lignes afin que
     les chiffres restent alignés d'une tuile à l'autre même quand un libellé passe à la ligne. */
  .kpi-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    min-height: 28px;
    color: var(--muted);
  }

  .dash-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .dash-section-titre {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
  }
  .actions-urgentes {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .actions-urgentes-vide {
    background: var(--success-bg);
    color: var(--success);
    border-radius: 8px;
    padding: 16px;
    font-size: 13.5px;
  }
  .action-urgente-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
  }
  .action-urgente-ligne:hover { border-color: var(--focus); }
  .action-urgente-nom { font-weight: 600; color: var(--ink); flex-shrink: 0; }
  .action-urgente-raison { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .action-urgente-fleche { margin-left: auto; color: var(--muted); flex-shrink: 0; }

  @media (max-width: 1300px) {
    .kpis-dashboard { grid-template-columns: repeat(3, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-header-actions { width: 100%; }
    .dash-recherche { flex: 1 1 auto; width: auto; }
  }
  @media (max-width: 640px) {
    .kpis-dashboard { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---- Calculateur de provision sur frais d'acte (onglet indépendant) ----
     Repris d'une maquette fournie par l'étude, mais entièrement réhabillé avec les tokens déjà en
     place (--focus, --paper-card, --line...) plutôt que sa propre palette bordeaux/or — même
     principe que le reste de l'outil : un seul système de couleurs, pas un second par écran.
     .dash-grid (déjà définie ci-dessus pour le tableau de bord) est réutilisée telle quelle pour
     la disposition à deux colonnes paramètres/résultat. */
  .calc-card {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-card);
  }
  .calc-card-notes { font-size: 13px; }
  .calc-card-notes p { margin: 0 0 10px; }
  .calc-card-notes p:last-child { margin-bottom: 0; }
  .calc-champs { display: flex; flex-direction: column; gap: 16px; }
  .calc-champ label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
  .calc-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .calc-radios label {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--paper-sunk);
    padding: 10px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
  }
  .calc-radios label:has(input:checked) { border-color: var(--focus); }
  .calc-radios input { width: auto; accent-color: var(--focus); }
  /* Résultat : léger fond teinté --focus (color-mix, même technique que .kpi-tile/.dot-label
     ailleurs dans l'outil) pour distinguer le total du reste de la carte sans inventer de couleur. */
  .calc-resultat {
    background: color-mix(in srgb, var(--focus) 6%, var(--paper-sunk));
    border: 1px solid color-mix(in srgb, var(--focus) 18%, var(--line));
    border-radius: 8px;
    padding: 18px;
  }
  .calc-tag {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .calc-total {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--focus);
    margin: 4px 0;
    letter-spacing: -0.02em;
  }
  .calc-small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
  .calc-lcbft {
    color: var(--success);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
  }
  .calc-ratebox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
  .calc-pill {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 11px;
    color: var(--muted);
  }
  .calc-pill strong { display: block; color: var(--ink); font-size: 13.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .calc-saving { color: var(--success); font-weight: 600; font-size: 12.5px; margin-top: 12px; }
  .calc-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
  .calc-table td { padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
  .calc-table td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .calc-table tr:last-child td { border-bottom: 0; padding-top: 14px; font-size: 14.5px; }
  @media (max-width: 640px) {
    .calc-radios, .calc-ratebox { grid-template-columns: 1fr; }
  }

  @media (max-width: 900px) {
    .sidebar-burger {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 40;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--sidebar-border);
      background: var(--sidebar-bg);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      color: var(--ink);
      font-size: 18px;
      cursor: pointer;
      box-shadow: var(--shadow-float);
    }
    /* Overlay fixe par-dessus le contenu (contrairement au flux normal en desktop) : c'est ici que
       le flou de .sidebar (voir plus haut) devient réellement visible, sur ce qui défile dessous. */
    .sidebar {
      position: fixed;
      z-index: 41;
      top: 0;
      left: 0;
      transform: translateX(-100%);
      box-shadow: var(--shadow-float);
      transition: transform 0.2s ease;
    }
    .sidebar.ouverte { transform: translateX(0); }
    .sidebar-scrim {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 39;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .sidebar-scrim.visible { opacity: 1; pointer-events: auto; }
    .app-main { padding-top: 68px; }
  }

  .wrap-suivi { max-width: 1680px; margin: 0 auto; }

  /* ---- bandeau de statistiques en tête du suivi : reprend la palette existante, la couleur
     restant réservée aux catégories d'échéance (urgent/prêt) plutôt qu'un code inventé. ---- */
  .stats-suivi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }
  .stat-tile {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
  }
  .stat-num {
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: 8px;
  }
  .stat-num.c-urgent { color: var(--urgent); }
  .stat-num.c-pret { color: var(--pret); }
  .stat-num.c-neutre { color: var(--ink); }
  .stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    min-height: 28px;
    color: var(--muted);
  }

  @media (max-width: 720px) {
    .stats-suivi { grid-template-columns: repeat(2, 1fr); }
  }

  .alerte-acces {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--pret-bg);
    border: 1px solid var(--pret);
    color: var(--pret);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 24px;
    font-size: 13.5px;
  }
  .alerte-acces .toolbar-btn { flex-shrink: 0; }

  /* ---- new dossier panel ---- */

  .panel {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-card);
  }

  .panel summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: 19px;
    font-weight: 600;
  }

  .panel summary::-webkit-details-marker { display: none; }

  .panel summary .plus {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    color: var(--focus);
    transition: transform 0.15s ease;
  }

  .panel[open] summary .plus { transform: rotate(45deg); }

  .panel-body {
    padding: 4px 22px 26px;
    border-top: 1px solid var(--line-soft);
  }

  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
  }

  @media (max-width: 620px) {
    .field-row { grid-template-columns: 1fr; }
  }

  label {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 5px;
  }

  input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="search"], textarea, select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    transition: border-color 0.15s ease;
  }
  /* Safari iOS ne respecte pas toujours une largeur CSS plus étroite que la taille intrinsèque
     des segments jour/mois/année d'un <input type="date"> (surtout avec le réglage
     d'accessibilité "Texte plus grand" activé) : sans ce garde-fou, le champ peut déborder de son
     bloc .date-block sur iPhone alors qu'il tient normalement dans Chrome/desktop. Signalé par
     l'étude sur les 3 champs de la section "Vérifier les échéances" — non reproductible dans cet
     environnement de dev (pas de Safari/iOS disponible) : à reconfirmer sur un vrai iPhone.
     Un premier essai (box-sizing/max-width/min-width seuls) n'a pas suffi : cette taille
     intrinsèque dépend aussi du font-size (la mise à l'échelle "Texte plus grand" d'iOS l'agrandit
     davantage), d'où la réduction ci-dessous sur petit écran, en plus des propriétés déjà posées. */
  input[type="date"] {
    -webkit-min-logical-width: 0;
  }
  @media (max-width: 480px) {
    input[type="date"] {
      font-size: 13px;
      padding: 8px 6px;
    }
    .date-block { padding-left: 10px; }
  }
  input[type="text"]:hover, input[type="date"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, select:hover { border-color: var(--muted); }

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

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

  fieldset {
    border: none;
    padding: 0;
    margin: 22px 0 0;
  }

  legend {
    font-size: 13px;
    color: var(--ink-soft);
    padding: 0;
    margin-bottom: 8px;
  }

  .date-block {
    border-left: 3px solid var(--line);
    padding: 4px 0 4px 14px;
    margin-top: 16px;
  }
  .date-block.pret { border-color: var(--pret); }
  .date-block.acte { border-color: var(--acte); }
  .date-block.ventebien { border-color: var(--ventebien); }
  .date-block.autre { border-color: var(--muted); }

  .date-block .label-line {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .extract-box {
    /* Fond neutre dérivé du thème (var(--paper-sunk)) plutôt que le beige fixe #F4F5F0 d'origine :
       ce dernier ne changeait jamais avec le thème et tranchait sur le mode sombre — un panneau
       clair flottant sur fond sombre, jamais corrigé faute de dark override dédié. */
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 20px;
    margin-top: 20px;
  }

  p.hint {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 8px 0 0;
  }

  .chips {
    margin-top: 12px;
  }

  .chips-groupe-titre {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 14px 0 8px;
  }
  .chips-groupe-titre:first-child { margin-top: 0; }

  .chips-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .chip {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted);
    border-radius: 2px;
    padding: 6px 8px 8px;
    font-size: 13px;
    transition: opacity 0.15s;
  }
  .chip.chip-pret { border-left-color: var(--pret); }
  .chip.chip-acte { border-left-color: var(--acte); }
  .chip.chip-ventebien { border-left-color: var(--ventebien); }
  .chip.chip-autre { border-left-color: var(--muted); }
  .chip.inactive { opacity: 0.4; }
  .chip.inactive .assign-btns { pointer-events: none; }

  .chip-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .switch.small { width: 26px; height: 15px; }
  .switch.small .slider::before { height: 10px; width: 10px; left: 2.5px; bottom: 2.5px; }
  .switch.small input:checked + .slider::before { transform: translateX(11px); }

  .chip .date-text {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
  }

  .chip .ctx {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 6px;
    max-width: 320px;
  }

  .chip .assign-btns { display: flex; gap: 4px; }

  .mini-btn {
    font-family: inherit;
    font-size: 11.5px;
    border: 1px solid var(--line);
    background: var(--paper-card);
    padding: 3px 7px;
    border-radius: 2px;
    cursor: pointer;
    color: var(--ink-soft);
  }
  .mini-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
  .mini-btn.suggested.pret { background: var(--pret-bg); border-color: var(--pret); color: var(--pret); font-weight: 600; }
  .mini-btn.suggested.acte { background: var(--acte-bg); border-color: var(--acte); color: var(--acte); font-weight: 600; }
  .mini-btn.suggested.ventebien { background: var(--ventebien-bg); border-color: var(--ventebien); color: var(--ventebien); font-weight: 600; }
  .mini-btn.suggested.autre { background: var(--line-soft); border-color: var(--muted); color: var(--ink-soft); font-weight: 600; }

  /* Dropzone verticale et centrée (icône, bouton, indication du glisser-déposer) plutôt que la
     ligne compacte d'origine (bouton + texte côte à côte) : une zone de dépôt trop petite pour ce
     qu'elle représente ne se lit pas comme une cible, et laissait la carte "Nouveau dossier" à
     moitié vide au premier coup d'œil. */
  .pdf-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    border: 2px dashed var(--line);
    border-radius: 8px;
    padding: 36px 20px;
    background: var(--paper-card);
    transition: border-color 0.15s, background 0.15s;
  }
  .pdf-dropzone.survol {
    border-color: var(--focus);
    background: var(--acte-bg);
  }
  .pdf-dropzone-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--acte-bg);
    color: var(--focus);
    font-size: 19px;
    margin-bottom: 4px;
  }

  .pdf-dropzone-hint {
    font-size: 13px;
    color: var(--muted);
  }

  input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }

  .file-btn {
    display: inline-block;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    margin: 0;
  }
  .file-btn:hover { border-color: var(--ink-soft); }

  .pdf-status {
    font-size: 13px;
    margin-top: 10px;
    min-height: 18px;
  }
  .pdf-status.loading { color: var(--ink-soft); }
  .pdf-status.ok { color: var(--success); font-weight: 600; }
  .pdf-status.err { color: var(--urgent); font-weight: 500; }

  .compromis-info.warn {
    background: var(--pret-bg);
    border-color: var(--pret);
  }

  .cash-note {
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-left: 3px solid var(--pret);
    border-radius: 3px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  .analyse-juridique {
    margin-top: 22px;
    padding: 18px;
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .analyse-titre {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
  }

  .analyse-vide-etat {
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
    padding: 8px 2px;
  }

  .analyse-section {
    background: var(--paper-card);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  .analyse-section:last-of-type { margin-bottom: 0; }

  .analyse-sous-titre {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 9px;
  }

  .analyse-compteur {
    display: inline-block;
    background: var(--ventebien-bg);
    color: var(--ventebien);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 9px;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
  }

  .analyse-documents-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
  }
  .analyse-doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--paper-card);
    border: 1px solid var(--ventebien);
    color: var(--ink);
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 14px;
  }
  .analyse-doc-badge::before { content: "✓"; color: var(--ventebien); font-weight: 700; }

  /* ---- pièces du dossier (checklist de constitution, selon le type de vente) ---- */
  .pieces-dossier {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .pieces-dossier-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .pieces-compteur {
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--pret-bg);
    color: var(--pret);
  }
  .pieces-compteur.complet { background: var(--success-bg); color: var(--success); }
  .pieces-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .piece-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--paper-card);
    border: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 12.5px;
    padding: 4px 4px 4px 10px;
    border-radius: 14px;
  }
  .piece-icone { font-weight: 700; }
  /* .piece-label porte le contenu (icône + libellé) : un <button> quand la pièce est cliquable
     (reçue → ouvrirPieceTrouvee ; personnalisée → basculerStatutPiecePersonnalisee, faute de
     motifNom pour la détecter automatiquement), un simple <span> sinon (manquante/inconnu et pas
     personnalisée, rien à faire au clic). .piece-suppr (croix) est un second élément de la même
     puce, jamais imbriqué dans .piece-label — deux <button> l'un dans l'autre serait invalide et
     casserait la délimitation des clics. */
  .piece-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
  }
  button.piece-label { cursor: pointer; }
  .piece-item.recue { border-color: var(--success); color: var(--ink); }
  .piece-item.recue:hover { background: var(--success-bg); }
  .piece-item.recue .piece-icone { color: var(--success); }
  .piece-item.manquante { border-color: var(--pret); color: var(--ink); }
  .piece-item.manquante .piece-icone { color: var(--pret); }
  .piece-item.inconnu .piece-icone { color: var(--muted); }
  .piece-suppr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    flex: none;
  }
  .piece-suppr:hover { background: var(--paper-sunk); color: var(--urgent); }
  .piece-suppr .icone { width: 9px; height: 9px; }

  .ajout-piece-btn { margin-top: 10px; }
  .ajout-piece-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
  }
  .ajout-piece-form input[type="text"] { flex: 1 1 auto; }

  /* ---- diagnostic du dernier parcours du dossier local (voir renderDiagnosticParcours) ----
     Repliable et FERMÉ par défaut (contrairement à .pieces-dossier/.analyse-juridique, toujours
     visibles) : c'est un outil de dépannage ponctuel à ouvrir au besoin, pas un suivi actif de la
     fiche — l'afficher ouvert par défaut alourdirait une fiche déjà dense pour un usage occasionnel. */
  .diagnostic-parcours {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .diagnostic-parcours > summary { cursor: pointer; list-style: none; }
  .diagnostic-parcours > summary::-webkit-details-marker { display: none; }
  .diagnostic-parcours > summary::after { content: " ▸"; color: var(--muted); }
  .diagnostic-parcours[open] > summary::after { content: " ▾"; }
  .diagnostic-corps { margin-top: 10px; }
  .diagnostic-resume {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.6;
  }
  .diagnostic-journal {
    margin: 0;
    padding: 8px 10px;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    background: var(--paper-card);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--ink-soft);
    line-height: 1.7;
  }
  .diagnostic-vide, .diagnostic-erreur {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-style: italic;
    margin: 0;
  }
  .diagnostic-erreur { color: var(--urgent); font-style: normal; }

  /* Aperçu de la checklist à l'étape "Finaliser" du wizard, avant l'enregistrement du dossier —
     mêmes puces .piece-item que le suivi réel, mais sans compteur ni bouton (rien à vérifier
     encore, juste montrer ce qui sera attendu selon le type de vente choisi). Padding symétrique
     restauré ici : sans croix de suppression (dossier pas encore créé, rien à personnaliser), le
     padding asymétrique de .piece-item (pensé pour laisser la place à .piece-suppr) déséquilibrerait
     visuellement la puce. */
  .pieces-apercu { margin: 4px 0 20px; }
  .pieces-apercu .piece-item { padding: 4px 10px; }
  .pieces-apercu-titre {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }

  .analyse-vide {
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
  }
  .analyse-note {
    font-size: 12.5px;
    color: var(--ink-soft);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--pret);
    border-radius: 3px;
    padding: 9px 13px;
    margin-top: 12px;
    line-height: 1.55;
  }

  .analyse-engagement-ligne {
    display: flex;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .analyse-engagement-ligne::before {
    content: "✓";
    flex: 0 0 auto;
    color: var(--success);
    font-weight: 700;
  }
  .analyse-engagement-ligne:first-child { border-top: none; }

  .engagement-type {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 9px;
    height: fit-content;
    margin-top: 1px;
  }
  .condition-ligne {
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.55;
  }
  .condition-ligne:first-child { border-top: none; }
  .condition-titre {
    font-weight: 700;
    color: var(--ink);
    display: block;
    margin-bottom: 2px;
  }
  .condition-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 6px;
    vertical-align: middle;
  }
  .condition-badge.suspensive { background: var(--acte-bg); color: var(--acte); }
  .condition-badge.particuliere { background: var(--ventebien-bg); color: var(--ventebien); }
  .condition-contenu { color: var(--ink-soft); }

  .engagement-type.document { background: var(--acte-bg); color: var(--acte); }
  .engagement-type.entretien { background: var(--ventebien-bg); color: var(--ventebien); }
  .engagement-type.travaux { background: var(--pret-bg); color: var(--pret); }

  .analyse-doc-badge.cat-entretien { border-color: var(--ventebien); }
  .analyse-doc-badge.cat-travaux { border-color: var(--pret); }
  .analyse-doc-badge.cat-travaux::before { color: var(--pret); }
  .analyse-doc-badge.cat-justificatif { border-color: var(--acte); }
  .analyse-doc-badge.cat-justificatif::before { color: var(--acte); }

  .form-error {
    display: none;
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-left: 3px solid var(--urgent);
    color: var(--ink);
    padding: 9px 14px;
    border-radius: 2px;
    margin-top: 14px;
    font-size: 13.5px;
  }

  .compromis-info {
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-left: 3px solid var(--acte);
    border-radius: 3px;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    flex: 0 0 auto;
  }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--line);
    transition: 0.15s;
    border-radius: 20px;
  }
  .switch .slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.15s;
    border-radius: 50%;
  }
  .switch input:checked + .slider::before { transform: translateX(14px); }
  .date-block.pret .switch input:checked + .slider { background-color: var(--pret); }
  .date-block.acte .switch input:checked + .slider { background-color: var(--acte); }
  .date-block.ventebien .switch input:checked + .slider { background-color: var(--ventebien); }
  .date-block.autre .switch input:checked + .slider { background-color: var(--muted); }

  .date-block .label-line {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .date-block.inactive { opacity: 0.5; }
  .date-block.inactive input[type="date"],
  .date-block.inactive input[type="text"] {
    background: var(--line-soft);
    pointer-events: none;
  }

  .add-autre-btn {
    margin-top: 16px;
    font-size: 13px;
    padding: 8px 14px;
  }

  .autre-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .autre-row input[type="text"] { flex: 1 1 220px; }
  .autre-row input[type="date"] { flex: 0 0 160px; }

  .reminder-days {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
  }

  .reminder-days label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--ink);
    margin: 0;
  }

  .actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
  }

  button.primary, button.secondary {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 11px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  button.primary {
    background: var(--focus);
    color: #fff;
    border: 1px solid var(--focus);
  }
  button.primary:hover { background: var(--focus-hover); border-color: var(--focus-hover); }

  button.secondary {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
  }
  button.secondary:hover { color: var(--ink); background: var(--line-soft); border-color: var(--line); }

  /* ---- dossier list ---- */

  .list-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .list-heading h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
  }
  .list-heading .count {
    font-size: 13px;
    color: var(--muted);
  }

  /* ---- tableau de bord ---- */
  .dashboard {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-card);
  }
  .dashboard-titre {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .dashboard-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    border-top: 1px solid var(--line-soft);
  }
  .dashboard-ligne:first-child { border-top: none; }
  .dashboard-pastille {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .dashboard-pastille.pret { background: var(--pret); }
  .dashboard-pastille.acte { background: var(--acte); }
  .dashboard-pastille.ventebien { background: var(--ventebien); }
  .dashboard-pastille.autre { background: var(--muted); }
  .dashboard-jours {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--urgent);
    min-width: 42px;
  }
  .dashboard-texte { color: var(--ink); }
  .dashboard-texte b { font-weight: 600; }

  /* ---- barre d'outils de la liste ---- */
  .list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
  }

  /* Exporter/Importer sous la liste plutôt qu'au-dessus : actions de sauvegarde du registre,
     moins fréquentes que la recherche/les filtres, pas besoin de les garder sous les yeux en
     permanence en tête de liste. */
  .list-toolbar-bas {
    margin-top: 20px;
    margin-bottom: 0;
    padding-top: 16px;
    padding-bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--line-soft);
  }
  .toolbar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
  }
  .toolbar-item select {
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 4px 8px;
    background: var(--paper-card);
    color: var(--ink);
  }
  .toolbar-checkbox { cursor: pointer; }
  .toolbar-spacer { flex: 1; }

  .toolbar-recherche input {
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 5px 10px;
    background: var(--paper-card);
    color: var(--ink);
    width: 220px;
    max-width: 40vw;
  }
  .toolbar-recherche input:focus { outline: none; border-color: var(--focus); }

  .toolbar-btn {
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--paper-card);
    color: var(--ink-soft);
    padding: 6px 12px;
    border-radius: 2px;
    cursor: pointer;
  }
  .toolbar-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
  .toolbar-btn-label { display: inline-flex; align-items: center; }

  .statut-partage {
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .statut-partage.actif::before { content: "●"; color: var(--success); }
  .statut-partage.attente::before { content: "●"; color: var(--pret); }

  /* ---- toast (annuler suppression) ---- */
  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13.5px;
    z-index: 900;
  }
  .toast-undo {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    background: none;
    border: none;
    color: #8FD3FF;
    cursor: pointer;
    padding: 0;
  }
  .toast-undo:hover { text-decoration: underline; }

  /* ---- badges de confiance / statut du dossier / appris / estimé ----
     Tous en .dot-label désormais (voir sa définition plus bas, section "tab-offre-pret") : ce
     bloc n'a donc plus besoin de dupliquer taille/graisse/fond pour chacun. `.dossier-nom-tableau`
     et `.nom-affichage` placent le badge de statut juste avant le nom du dossier — la marge qui
     séparait les deux vient d'eux, pas du badge lui-même. */
  .dossier-nom-tableau .dot-label, .nom-affichage .dot-label { margin-right: 8px; }

  /* Intitulé de section en petites capitales espacées, partagé par les blocs de la fiche dossier
     (pièces, historique) et les tuiles de chiffres (.kpi-label / .stat-label reprennent la même
     recette) : un seul registre d'étiquette dans tout l'outil, au lieu d'un style de titre par
     bloc. */
  .section-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ---- historique ---- */
  .historique-toggle {
    font-family: inherit;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 10px;
    align-self: flex-start;
  }
  .historique-toggle:hover { color: var(--ink-soft); }
  .historique-liste {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--paper);
    border-radius: 2px;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .historique-liste.ouvert { display: block; }
  .historique-ligne { padding: 3px 0; }
  .historique-ligne .h-date {
    color: var(--muted);
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
  }

  /* ---- archive ---- */
  .dossier.est-archive { opacity: 0.65; }

  .offre-pret-ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
  }


  .lien-dossier-local {
    font-size: 12px;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 10px;
  }
  .lien-dossier-local:hover { color: var(--focus); }

  .reconfirmer-acces {
    display: inline-block;
    font-size: 11.5px;
    color: var(--pret);
    background: var(--pret-bg);
    border: 1px solid var(--pret);
    border-radius: 3px;
    padding: 2px 8px;
    margin-left: 8px;
    cursor: pointer;
  }

  .empty-state {
    border: 1px dashed var(--line);
    border-radius: 3px;
    padding: 32px 24px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14.5px;
  }

  .dossier {
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px 26px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease;
  }
  .dossier:hover { box-shadow: 0 2px 4px rgba(22,35,60,0.06), 0 6px 16px rgba(22,35,60,0.07); }

  /* ---- vue tableau (alternative compacte à la liste de cartes, pour un grand nombre de
     dossiers) : une ligne résumée par dossier, qui déplie la carte complète (inchangée, mêmes
     actions) au clic plutôt que de dupliquer la logique des boutons dans une ligne étroite. ---- */
  .table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper-card);
    box-shadow: var(--shadow-card);
  }
  .dossiers-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
  .dossiers-table thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .dossiers-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
  }
  /* Le filet entre deux lignes est peint par la LIGNE (un dégradé de 1px calé en bas), pas par une
     bordure de cellule : il peut ainsi s'estomper à ses deux extrémités au lieu de buter net sur
     le bord du tableau — le tableau se lit comme une liste aérée plutôt que comme une grille.
     Conséquence à garder en tête : toute couleur de fond posée sur une ligne doit passer par
     background-image en SECONDE couche (voir .ligne-resume:hover), sinon elle recouvre le filet. */
  .dossiers-table thead tr,
  .dossiers-table tbody tr {
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 1px;
  }
  .dossiers-table thead tr {
    background-image: linear-gradient(to right, transparent, var(--line) 44px, var(--line) calc(100% - 44px), transparent);
  }
  .dossiers-table tbody tr {
    background-image: linear-gradient(to right, transparent, var(--line-soft) 44px, var(--line-soft) calc(100% - 44px), transparent);
  }
  .ligne-resume { cursor: pointer; }
  .ligne-resume:hover {
    background-image:
      linear-gradient(to right, transparent, var(--line-soft) 44px, var(--line-soft) calc(100% - 44px), transparent),
      linear-gradient(var(--paper-sunk), var(--paper-sunk));
    background-size: 100% 1px, 100% 100%;
    background-position: bottom, 0 0;
  }
  .ligne-resume.est-archive { opacity: 0.65; }
  /* Même famille que .nom-texte (fiche dépliée dans le tiroir) : la seule occasion, dans tout le
     tableau, de faire porter un peu de caractère éditorial à l'identité "CLAIRE" plutôt que de la
     réserver aux titres de page — le nom du dossier est justement ce qu'on lit en premier sur
     l'écran le plus consulté de l'outil. */
  .ligne-resume .dossier-nom-tableau {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
  }
  /* Même taille que .echeance-jours (12px) sur la même ligne — demandé par l'étude, le nom du
     responsable ressortait visuellement plus gros que les dates à côté. */
  .ligne-resume .dossier-responsable-tableau { color: var(--ink-soft); font-size: 12px; }

  .th-triable { cursor: pointer; }
  .th-triable:hover { color: var(--ink-soft); }
  .tri-actif { color: var(--focus); }

  .action-rapide {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 6px;
    cursor: pointer;
  }
  .action-rapide:hover { border-color: var(--focus); color: var(--focus); }

  /* Ajouter une échéance après coup (voir renderAjoutEcheance) : bouton sous la grille .tabs,
     pas accolé à un élément voisin comme les autres .action-rapide (Revérifier...) — annule leur
     margin-left par défaut. .ajout-echeance-form garde le même .date-block.autre que le
     formulaire de création (16px de marge au-dessus), pas besoin de la retoucher ici. */
  .ajout-echeance-btn { margin: 10px 0 0; }

  .echeance-jours { font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
  .echeance-jours.urgent { color: var(--urgent); font-weight: 600; }
  .echeance-jours.calme { color: var(--ink-soft); }

  /* Ligne dont la fiche est ouverte dans le tiroir : un liseré d'accent à gauche relie le tiroir
     à la ligne d'où il vient, seul repère qui subsiste puisque la ligne ne se déplie plus.
     Peint en background-image comme le filet de ligne (voir .dossiers-table tbody tr) — une
     bordure gauche décalerait le contenu de la cellule d'un pixel à l'ouverture. */
  .ligne-resume.ligne-active {
    background-image:
      linear-gradient(to right, transparent, var(--line-soft) 44px, var(--line-soft) calc(100% - 44px), transparent),
      linear-gradient(to right, var(--focus) 0 3px, transparent 3px),
      linear-gradient(var(--paper-sunk), var(--paper-sunk));
    background-size: 100% 1px, 100% 100%, 100% 100%;
    background-position: bottom, 0 0, 0 0;
  }

  /* ---- tiroir latéral de la fiche dossier ----
     Remplace l'ancien dépliage de la ligne du tableau : sur une soixantaine de dossiers, ouvrir
     une fiche in situ poussait toutes les lignes suivantes plusieurs centaines de pixels plus bas.
     Ici la liste ne bouge pas, et un seul dossier est ouvert à la fois (voir dossierOuvert). */
  .drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(22,35,60,0.35);
    justify-content: flex-end;
  }
  [data-theme="dark"] .drawer-overlay { background: rgba(0,0,0,0.55); }

  .drawer-panneau {
    position: relative;
    width: min(620px, 100%);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper-card);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-float);
    padding: 20px 22px 40px;
    animation: drawer-entre 0.18s ease-out;
  }
  @keyframes drawer-entre {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .drawer-panneau { animation: none; }
  }

  /* Le tiroir défile sur toute sa hauteur : la croix reste accessible sans remonter. Elle occupe
     sa propre barre collante plutôt que de flotter au-dessus du contenu — en flottant, elle
     empiétait sur la première ligne de la fiche (nom du dossier + Archiver/Supprimer). */
  .drawer-barre {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    background: var(--paper-card);
    padding-bottom: 8px;
  }
  .drawer-fermer {
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    color: var(--ink-soft);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    cursor: pointer;
  }
  .drawer-fermer:hover { color: var(--ink); background: var(--line-soft); }

  /* Le tiroir gère son propre défilement : sans ça, arrivé en bout de course, la molette continue
     sur la liste derrière et l'utilisateur perd la position qu'on cherchait justement à préserver. */
  body.drawer-ouvert { overflow: hidden; }

  /* La fiche remplit le tiroir : elle n'a plus besoin de son propre cadre (carte dans une carte)
     ni de la respiration prévue quand elle s'affichait au milieu d'une liste. */
  .drawer-panneau .dossier {
    margin-bottom: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .drawer-panneau .dossier-head { margin-bottom: 12px; }
  .drawer-panneau .dossier-head h3 { font-size: 20px; }
  /* Deux échéances par rangée dans la largeur du tiroir (la valeur par défaut, 150px, en tasserait
     trois et l'échéance "prêt" porte en plus le statut de l'offre et son bouton Revérifier). */
  .drawer-panneau .tabs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  /* En-tête en une seule colonne verticale (repris d'une maquette fournie par l'étude, recolorée
     avec nos tokens) : badge de statut + Archiver/Supprimer d'abord, puis le nom, "Changer de
     dossier", adresse/prix et la classification — un seul ordre de lecture de haut en bas, plus de
     répartition gauche (nom) / droite (actions) qui plaçait ces deux zones loin l'une de l'autre. */
  .dossier-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
  }

  .dossier-head-barre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
  }

  /* Filets fins entre les sections de l'en-tête (nom, adresse/prix, classification) : un simple
     trait, pas de dégradé comme .table (les rangées d'un tableau) — ici trois blocs bien distincts
     à séparer clairement, pas une liste de lignes similaires. */
  .dossier-head-divider { height: 1px; background: var(--line); margin: 8px 0; }

  /* Côte à côte plutôt qu'empilées : le tiroir élargi (620px, voir .drawer-panneau) laisse assez
     de place pour les deux sur une même ligne. flex-wrap en repli sous cette largeur (mobile). */
  .dossier-adresse-prix { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .dossier-info-ligne { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); flex: 1 1 200px; min-width: 0; }
  .dossier-info-ligne .icone { flex: none; color: var(--muted); }
  .dossier-info-ligne input.input-inline { flex: 1; min-width: 0; }

  /* Type de vente / Rôle du notaire / Responsable : libellé au-dessus du champ, en grille plutôt
     qu'une ligne de libellés-en-ligne qui se repliait de façon inégale dans la largeur du tiroir. */
  /* minmax à 165px (pas 140) : dans la largeur du tiroir (~520px), 140px laissait passer 3
     colonnes mais tronquait le nom le plus long de la liste des responsables ("Bastien
     ANGLUMENT") dans son <select> — à 165px la grille passe à 2 colonnes, le champ Responsable
     prend sa propre ligne pleine largeur et n'est plus coupé. */
  .dossier-classification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
  }
  .classif-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .classif-champ label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .select-classif {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--paper-sunk);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    width: 100%;
  }
  .select-classif:hover { border-color: var(--muted); }
  .select-classif:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

  /* Carte ouverte en deux colonnes (échéances/pièces/analyse à gauche, historique + actions à
     droite) — demandé pour profiter de la largeur disponible plutôt qu'un long défilement vertical
     unique. Empile en une seule colonne sous la largeur d'une carte compacte/mobile. */
  /* Fiche en une seule colonne : elle vit maintenant dans le tiroir latéral (~520px), où les deux
     colonnes d'avant n'auraient plus tenu. L'ordre de lecture porte la hiérarchie à la place des
     colonnes — échéances, puis les trois actions (remontées juste dessous, ce sont elles qu'on
     vient chercher après avoir lu une date), puis les pièces, l'analyse et l'historique, ces deux
     derniers repliés. */
  .dossier-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .dossier-head h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 3px;
  }

  /* Nom du dossier : affichage simple + crayon plutôt qu'un champ toujours modifiable au clic —
     évite de déclencher une édition par un simple clic sur le nom (voir activerEditionNom()). */
  .nom-dossier { margin: 0 0 3px -2px; }
  .nom-affichage, .nom-edition {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nom-affichage[hidden], .nom-edition[hidden] { display: none; }
  /* Toujours sur sa propre ligne sous le nom, jamais mélangée à .nom-affichage (voir CLAUDE.md,
     "se balade" signalé par l'étude) : sa position ne dépend plus de la longueur du nom. */
  .dossier-lien-local-ligne { margin: 2px 0 0; }
  .nom-texte {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
  }
  .icon-crayon, .icon-valider {
    font-family: inherit;
    font-size: 12.5px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 3px;
    line-height: 1;
  }
  .icon-crayon { color: var(--muted); opacity: 0.75; }
  .icon-crayon:hover { opacity: 1; color: var(--ink-soft); background: var(--paper-sunk); }
  .icon-valider { color: var(--success); font-weight: 700; font-size: 15px; }
  .icon-valider:hover { background: var(--success-bg); }

  .dossier-nom-input {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    border: 1px solid var(--focus);
    background: var(--paper-card);
    padding: 4px 8px;
    border-radius: 3px;
    max-width: 280px;
  }
  .dossier-nom-input:focus { outline: none; }

  .dossier-head .addr {
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  /* Champs texte libres (adresse/prix, détectés automatiquement — voir CLAUDE.md) : soulignement en
     tirets, pas de cadre plein, curseur texte. Chacun occupe sa propre ligne (voir
     .dossier-info-ligne) et s'étire donc pleine largeur, plus de largeur fixe par champ.
     Sélecteur préfixé par `input` (pas juste `.input-inline`) : la règle générique
     `input[type="text"], ... { width:100%; ... }` combine élément+attribut, une spécificité qu'une
     simple classe seule ne bat pas — sans ce préfixe, .input-inline perdrait bordure/fond/padding. */
  input.input-inline {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--line);
    padding: 0 2px;
    width: auto;
    max-width: none;
    min-width: 0;
    display: inline;
    cursor: text;
  }
  input.input-inline:hover { color: var(--ink); border-bottom-color: var(--ink-soft); }
  input.input-inline:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  input.input-inline::placeholder { color: var(--muted); font-style: italic; }

  /* Apport estimé (voir calculerApport) : petit cercle coloré + texte, même logique de couleur que
     .badge-statut (succès/pret-amber/urgent, aucune couleur inventée pour l'occasion). */
  .apport-ligne { margin-top: 4px; display: flex; align-items: center; gap: 6px; }
  .apport-cercle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .apport-cercle.apport-success { background: var(--success); }
  .apport-cercle.apport-pret { background: var(--pret); }
  .apport-cercle.apport-urgent { background: var(--urgent); }

  /* "Achat comptant" (.badge-cash) : simple métadonnée, pas une alerte — .dot-label dl-neutre
     (voir plus haut), pas de fond inventé pour l'occasion. Marge de séparation propre à sa
     position dans la classification, portée par cette classe plutôt que par .dot-label lui-même.
     ("Participant", même traitement à l'origine, retiré : redondant avec le sélecteur "Rôle du
     notaire" toujours visible juste en dessous, incohérent puisqu'absent pour "Instrumentaire". */
  .badge-cash { margin-top: 6px; }

  .icon-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .icon-btn:hover { color: var(--urgent); }

  .tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  @media (max-width: 420px) {
    .tabs { grid-template-columns: 1fr; }
  }

  /* Bloc aplati (bordure gauche colorée plutôt qu'un fond teinté pleine surface) : même langage
     visuel que .type-pill et .date-block (formulaire), plus proche de la maquette d'origine que
     l'ancien bloc à fond coloré, plus lourd. */
  .tab {
    position: relative;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--paper-card);
  }
  .tab.pret { border-left-color: var(--pret); }
  .tab.acte { border-left-color: var(--acte); }
  .tab.ventebien { border-left-color: var(--ventebien); }
  .tab.autre { border-left-color: var(--muted); }

  /* Croix de suppression d'une échéance personnalisée (voir supprimerEcheanceAutre) : positionnée
     en haut à droite de la carte plutôt qu'alignée avec le contenu, pour rester à l'écart du
     crayon de correction de date (icon-crayon) juste en dessous. */
  .tab-suppr {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 5px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .tab-suppr:hover { background: var(--paper-sunk); color: var(--urgent); }
  .tab-suppr .icone { width: 12px; height: 12px; }

  .tab .tab-name {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 4px;
  }

  .tab-select {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 0;
    margin: -2px 0 4px -2px;
    cursor: pointer;
    max-width: 100%;
  }
  .tab-select:hover { text-decoration: underline; }
  .tab-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .tab.pret .tab-select { color: var(--pret); }
  .tab.acte .tab-select { color: var(--acte); }
  .tab.ventebien .tab-select { color: var(--ventebien); }

  .tab .tab-date {
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: 4px;
  }

  /* Correction d'une date après enregistrement (erreur repérée plus tard) : même mécanisme
     crayon → champ → valider que le nom du dossier, voir activerEditionDate(). */
  .tab-date-affichage {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .tab-date-affichage[hidden] { display: none; }
  .tab-date-affichage .tab-date { margin-bottom: 0; }
  .tab-date-affichage .icon-crayon { font-size: 11px; padding: 2px 4px; }
  .tab-date-edition {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }
  .tab-date-edition[hidden] { display: none; }
  .tab-date-input {
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--focus);
    border-radius: 3px;
    padding: 4px 6px;
    background: var(--paper-card);
    color: var(--ink);
  }

  .tab .tab-countdown {
    font-size: 13px;
    color: var(--ink-soft);
  }
  .tab .tab-countdown.urgent {
    color: var(--urgent);
    font-weight: 600;
  }
  .tab .tab-countdown.passed {
    color: var(--muted);
    font-style: italic;
  }
  /* Offre confirmée reçue : la condition est résolue, le décompte le dit à la place d'un
     "Échéance dépassée" qui laisserait croire à un retard. */
  .tab .tab-countdown.recue {
    color: var(--success);
    font-weight: 600;
  }

  /* Statut de l'offre de prêt + action (Revérifier, ou Lier un dossier local si aucun n'est
     relié), sous la date/le décompte de la carte "Obtention du prêt" — plus proche de l'échéance
     qu'il concerne que son ancienne place dans l'en-tête du dossier. */
  .tab-offre-pret { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

  /* ---- .dot-label : langage unique de statut dans tout l'outil ----
     Un point (ou une icône) coloré + un mot, jamais de fond ni de contour par défaut — remplace
     l'empilement de composants qui disaient chacun la même chose à leur façon (badge-statut,
     badge-offre, type-pill, badge-confiance, badge-apprise, badge-role, badge-cash, chacun avec
     sa propre pastille pleine). Sur une ligne du tableau, empiler 3-4 pastilles à fond plein finit
     par ne plus rien faire ressortir ; un point de couleur + texte se lit d'un coup d'œil sans
     rivaliser avec ses voisins. Un seul cas garde un fond plein (.dl-alerte) : l'ambiguïté à
     vérifier en priorité doit rester la chose qui saute aux yeux sur la ligne.
     Née de .offre-puce (statut de l'offre de prêt, voir .tab-offre-pret ci-dessus), généralisée
     ici à tous les autres badges de statut de l'outil plutôt que dupliquée pour chacun. */
  .dot-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-soft);
    background: none;
    border: none;
    padding: 0;
  }
  button.dot-label { cursor: pointer; }
  button.dot-label:hover { text-decoration: underline; text-underline-offset: 2px; }
  .dot-label .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
  }
  .dot-label .icone { flex: none; }
  .dot-label.dl-neutre, .dot-label.dl-autre { color: var(--muted); }
  .dot-label.dl-pret { color: var(--pret); }
  .dot-label.dl-acte { color: var(--acte); }
  .dot-label.dl-ventebien { color: var(--ventebien); }
  .dot-label.dl-success { color: var(--success); }
  .dot-label.dl-urgent { color: var(--urgent); }
  .dot-label.dl-alerte {
    color: var(--urgent);
    background: color-mix(in srgb, var(--urgent) 12%, transparent);
    padding: 2px 8px 2px 6px;
    border-radius: 10px;
  }

  /* Les trois actions tiennent sur une seule ligne (demandé par l'étude), à largeurs égales :
     flex-wrap est désactivé et chaque bouton prend le tiers de la place, ce qui les fait aussi
     lire comme un seul bloc plutôt que trois pastilles de longueurs disparates. */
  .dossier-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 16px;
  }

  .dossier-actions button {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--paper-card);
    color: var(--ink-soft);
    cursor: pointer;
  }
  .dossier-actions button:hover { color: var(--ink); border-color: var(--ink-soft); }

  /* ---- en-tête et thème ---- */
  .header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .install-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 6px;
    border: 1px solid var(--focus);
    background: var(--acte-bg);
    color: var(--focus);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
  }
  .install-btn:hover { background: var(--focus); color: #fff; }

  .theme-btn {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper-card);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .theme-btn:hover { border-color: var(--focus); transform: scale(1.05); }


  /* ---- barre de progression (lecture PDF / OCR) ---- */
  .progress-bar {
    display: none;
    height: 4px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 10px;
  }
  .progress-bar.actif { display: block; }
  .progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--focus);
    border-radius: 2px;
    transition: width 0.25s ease;
  }
  .progress-bar.indetermine .progress-bar-fill {
    width: 40%;
    animation: glisse 1.1s ease-in-out infinite;
  }
  @keyframes glisse {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
  }

  /* ---- impression : une feuille A4 propre par dossier ---- */
  @media print {
    body { background: #fff; color: #000; font-size: 11pt; }
    .panel, .pdf-viewer, .list-toolbar, .dossier-actions, .theme-btn,
    .confirm-overlay, .toast, footer.note, .historique-toggle, .dashboard,
    .sidebar, .sidebar-burger, .sidebar-scrim, .dash-header, .kpis-dashboard, .actions-urgentes,
    .dash-section-titre { display: none !important; }
    .app-main { padding: 0; }
    .layout-cols { display: block; }
    .wrap { max-width: 100%; padding: 0; }
    .dossier {
      page-break-after: always;
      break-after: page;
      border: none;
      box-shadow: none;
      padding: 0;
      margin-bottom: 0;
    }
    .dossier:last-child { page-break-after: auto; }
    .dossier-nom-input { border: none; font-size: 18pt; padding: 0; }
    .nom-texte { font-size: 18pt; }
    .dossier-body { display: block; }
    /* La fiche n'est plus dans le flux de la page mais dans un tiroir fixe : à l'impression on le
       remet dans le flux, on masque tout le reste de l'application, et on imprime la seule fiche
       ouverte. Le sélecteur est ancré sur body.drawer-ouvert pour que le tiroir fermé (masqué par
       un style inline) reste masqué au lieu d'imprimer un panneau vide. */
    body.drawer-ouvert { overflow: visible; }
    body.drawer-ouvert .app-shell { display: none !important; }
    body.drawer-ouvert .drawer-overlay {
      display: block !important;
      position: static;
      background: none;
    }
    .drawer-panneau {
      width: 100%;
      height: auto;
      overflow: visible;
      border: none;
      box-shadow: none;
      padding: 0;
      animation: none;
    }
    .drawer-barre { display: none !important; }
    .tabs { display: block; }
    .tab { border: 1px solid #999; margin-bottom: 6pt; padding: 6pt; background: #fff !important; }
    .historique-liste { display: block !important; }
    .analyse-juridique { background: #fff; border: 1px solid #999; }
    .icon-btn, .tab-select, .icon-crayon, .icon-valider, .nom-edition, .tab-date-edition, .select-classif, .tab-suppr, .ajout-echeance-btn, .ajout-echeance-form, .piece-suppr, .ajout-piece-btn, .ajout-piece-form, .diagnostic-parcours { display: none !important; }
  }

  .analyse-repliable > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
  }
  .analyse-repliable[open] > summary { margin-bottom: 14px; }
  .analyse-repliable > summary::-webkit-details-marker { display: none; }
  .analyse-repliable > summary::after {
    content: " ▸";
    color: var(--muted);
    font-size: 11px;
  }
  .analyse-repliable[open] > summary::after { content: " ▾"; }

  /* ---- wizard "Nouveau dossier" (Importer / Vérifier / Finaliser) ---- */
  .wizard-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
  }
  .wizard-step-trait {
    flex: 1 1 24px;
    max-width: 40px;
    height: 1px;
    background: var(--line);
  }
  .wizard-step-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    padding: 6px 2px;
    cursor: pointer;
  }
  .wizard-step-btn:hover { color: var(--ink-soft); }
  .wizard-step-btn.actif { color: var(--ink); }
  .wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    flex: 0 0 auto;
  }
  .wizard-step-btn.actif .wizard-step-num { background: var(--focus); color: #fff; }

  .wizard-step { display: none; }
  .wizard-step.actif { display: block; }

  .wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
  }
  .wizard-nav .actions-row { margin-top: 0; }

  /* Ajustements de contraste en mode sombre : les éléments qui reposaient sur un fond blanc
     (boutons secondaires, bulles, badges pâles) deviennent illisibles sans ces reprises. */
  [data-theme="dark"] button.secondary,
  [data-theme="dark"] .toolbar-btn,
  [data-theme="dark"] .mini-btn,
  [data-theme="dark"] .dossier-actions button,
  [data-theme="dark"] .file-btn,
  [data-theme="dark"] .pdf-viewer-nav button {
    background: #2E2E2E;
    color: var(--ink);
    border-color: #454545;
  }
  [data-theme="dark"] button.secondary:hover,
  [data-theme="dark"] .toolbar-btn:hover,
  [data-theme="dark"] .mini-btn:hover,
  [data-theme="dark"] .dossier-actions button:hover,
  [data-theme="dark"] .file-btn:hover {
    background: #383838;
    border-color: var(--focus);
    color: #fff;
  }
  [data-theme="dark"] .confirm-box { background: #2A2A2A; }
  [data-theme="dark"] .confirm-box .btn-annuler { background: #2E2E2E; color: var(--ink); border-color: #454545; }
  [data-theme="dark"] .toast { background: #333333; border: 1px solid #454545; color: #fff; }
  [data-theme="dark"] .toast-undo { color: #8FCBFF; }
  [data-theme="dark"] .switch .slider { background-color: #454545; }
  [data-theme="dark"] .analyse-doc-badge { background: #2E2E2E; color: var(--ink); }
  [data-theme="dark"] .tab { background: #2A2A2A; }
  [data-theme="dark"] .pdf-viewer-canvas-wrap { background: #171717; }
  [data-theme="dark"] .theme-btn { background: #2E2E2E; }
  [data-theme="dark"] .dossier-nom-input:focus { background: #2E2E2E; }
  [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color-scheme: dark; }

  footer.note {
    margin-top: 40px;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }

  /* Modale de confirmation maison : les navigateurs bloquent souvent window.confirm() dans un
     aperçu en bac à sable (iframe), ce qui empêchait la suppression de fonctionner. */
  .confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22,35,60,0.35);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }
  .confirm-box {
    background: var(--paper-card);
    border-radius: 6px;
    padding: 22px 24px;
    max-width: 360px;
    width: calc(100% - 48px);
    box-shadow: 0 12px 32px rgba(22,35,60,0.25);
  }
  .confirm-box p {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.5;
  }
  .confirm-box .confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .confirm-box button {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 2px;
    cursor: pointer;
  }
  .confirm-box .btn-annuler {
    border: 1px solid var(--line);
    background: var(--paper-card);
    color: var(--ink-soft);
  }
  .confirm-box .btn-annuler:hover { border-color: var(--ink-soft); color: var(--ink); }
  .confirm-box .btn-confirmer {
    border: 1px solid var(--urgent);
    background: var(--urgent);
    color: #fff;
  }
  .confirm-box .btn-confirmer:hover { background: #b85e08; }

  /* ---- écran "À propos" (voir ouvrirAPropos dans script.js) ----
     Réutilise .confirm-overlay/.confirm-box (même fond, même carte centrée) pour rester cohérent
     avec le reste des fenêtres modales de l'outil, avec un contenu propre plutôt qu'un simple
     message + deux boutons. */
  .apropos-box { max-width: 400px; }
  .apropos-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }
  .apropos-tagline {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ink-soft);
  }
  .apropos-version {
    display: inline-block;
    margin: 0 0 16px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--paper-sunk);
    border: 1px solid var(--line-soft);
    font-size: 12px;
    color: var(--ink-soft);
  }
  .apropos-version strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  .apropos-desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .apropos-desc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    background: var(--paper-sunk);
    padding: 1px 4px;
    border-radius: 3px;
  }
  .apropos-note { font-style: italic; }
  .apropos-historique-titre { margin: 0 0 8px; }
  .apropos-historique-liste {
    margin: 0 0 16px;
    padding: 8px 10px;
    max-height: 160px;
    overflow-y: auto;
    list-style: none;
    background: var(--paper-sunk);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.7;
  }
  .apropos-historique-date {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 600;
  }

  /* Lien "À propos" en bas de la sidebar : volontairement discret (plus petit, muted) par rapport
     aux autres liens du pied de sidebar (installer l'app, thème) — une aide occasionnelle, pas une
     action fréquente. */
  .sidebar-link-apropos { font-size: 12.5px; color: var(--muted); padding: 8px 10px; }
  .sidebar-link-apropos .sidebar-link-icone { font-size: 13px; opacity: 0.75; }