/* Juriste d'à côté — application du cabinet. Bleu nuit et or du logo. Téléphone d'abord. */

:root {
  color-scheme: light;
  --fond: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --bord: #dfe5ee;
  --bord-fort: #c7d1de;
  --texte: #17202e;
  --texte-2: #465366;
  --texte-3: #66727f;
  --marque: #16294a;
  --marque-2: #213d69;
  --or: #c9922e;
  --or-clair: #f7ecd6;
  --accent: #1f5fb4;
  --accent-fonce: #184d93;
  --accent-clair: #e7effa;
  --danger: #b3261e;
  --danger-fond: #fbe9e7;
  --attention: #8a5a00;
  --attention-fond: #fdf0d5;
  --succes: #1b6e34;
  --succes-fond: #e4f3e8;
  /* Graphiques : couleurs validées (clarté, contraste, daltonisme). Recettes en bleu, dépenses en orange, partout. */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --grille: #e8ecf2;
  --axe: #c7d1de;
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(22, 41, 74, .06), 0 2px 10px rgba(22, 41, 74, .05);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --barre-bas: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--fond);
}
img, svg { max-width: 100%; }
/* Icône dans du texte : à la taille du texte. Les boutons, menus et badges fixent la leur. */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }

/* ---------- Démarrage et écran de connexion ---------- */

.demarrage {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--texte-3);
}

.porte {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: linear-gradient(160deg, var(--marque) 0%, var(--marque-2) 55%, var(--fond) 55.1%);
}
.porte-carte {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(22, 41, 74, .18);
  padding: 28px 22px;
}
.porte-carte .logo { display: block; width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 20px; }
.porte-carte h1 { font-size: 22px; text-align: center; }
.porte-carte .sous-titre { text-align: center; color: var(--texte-3); margin: 4px 0 20px; }
.porte-carte form { display: grid; gap: 14px; }
.case {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--texte-2);
  cursor: pointer;
}
.case input { flex: none; }
.porte-pied { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--texte-3); }

/* ---------- Structure ---------- */

.appli { min-height: 100vh; }

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--marque);
  color: #fff;
}
.marque { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.marque img { width: 36px; height: 36px; border-radius: 9px; }
.marque span { display: none; }
.titre-page { font-size: 17px; font-weight: 650; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete .personne { display: none; font-size: 13px; color: #cdd8ea; white-space: nowrap; }

.vue {
  padding: 16px 14px calc(var(--barre-bas) + 28px + env(safe-area-inset-bottom));
  max-width: 1180px;
  margin: 0 auto;
  outline: none;
}
.vue[aria-busy="true"] > * { opacity: .55; transition: opacity .15s; }

.menu-lateral { display: none; }

.barre-bas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barre-bas) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--bord);
}
.onglet {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--texte-3);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
}
.onglet svg { width: 24px; height: 24px; }
.onglet.actif { color: var(--accent); }
.onglet.actif svg { stroke-width: 2.2; }

.pastille {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.onglet .pastille { position: absolute; top: 6px; left: calc(50% + 6px); }

@media (min-width: 960px) {
  .appli {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
  }
  .entete { grid-column: 1 / -1; padding: 10px 22px; }
  .marque span { display: inline; font-size: 17px; }
  .marque { width: 218px; }
  .entete .personne { display: block; }
  .menu-lateral {
    display: block;
    position: sticky;
    top: 58px;
    align-self: start;
    height: calc(100vh - 58px);
    overflow-y: auto;
    padding: 16px 12px;
    border-right: 1px solid var(--bord);
    background: var(--surface);
  }
  .lien-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--texte-2);
    text-decoration: none;
    font-weight: 600;
    border: 0;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
  }
  .lien-menu svg { width: 20px; height: 20px; flex: none; }
  .lien-menu .pastille { margin-left: auto; }
  .lien-menu:hover { background: var(--surface-2); color: var(--texte); }
  .lien-menu.actif { background: var(--accent-clair); color: var(--accent-fonce); }
  .menu-separateur { height: 1px; background: var(--bord); margin: 10px 4px; }
  .menu-titre { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); padding: 4px 12px 6px; }
  .barre-bas { display: none; }
  .vue { padding: 24px 28px 48px; width: 100%; }
}

/* ---------- Blocs ---------- */

.pile { display: grid; gap: 16px; }
.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px;
  min-width: 0;
}
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.carte-tete h2 { font-size: 16px; }
.carte-tete .detail { color: var(--texte-3); font-size: 13px; }
.deux-colonnes { display: grid; gap: 16px; }
.colonne-principale { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: 1fr 1fr; }
  .carte { padding: 18px 20px; }
}
@media (min-width: 1080px) {
  .fiche { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
}

.tuiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .tuiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.tuile {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 12px 14px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
}
a.tuile:hover { box-shadow: 0 0 0 2px var(--accent-clair), var(--ombre); }
.tuile-libelle { font-size: 13px; color: var(--texte-2); }
.tuile-valeur { font-size: 22px; font-weight: 700; margin-top: 2px; line-height: 1.2; }
.tuile-detail { font-size: 12.5px; color: var(--texte-3); margin-top: 2px; }
.tuile.vedette .tuile-valeur { font-size: 28px; }
.tuile-valeur .devise { font-size: .62em; font-weight: 650; color: var(--texte-2); }
@media (min-width: 700px) { .tuile.vedette { grid-column: span 2; } }
.valeur-negative { color: var(--danger); }
.valeur-ok { color: var(--succes); }

.salutation { font-size: 14px; color: var(--texte-3); }
.salutation strong { color: var(--texte); font-size: 20px; display: block; }
.texte-muet { color: var(--texte-3); font-size: 13.5px; }
.petit-texte { font-size: 13px; }

/* ---------- Alertes et badges (toujours icône ou texte, jamais la couleur seule) ---------- */

.alertes { display: grid; gap: 8px; }
.alerte {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--surface-2);
}
.alerte svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alerte strong { display: block; }
.alerte .actions { margin-top: 8px; justify-content: flex-start; }
.alerte-critique { background: var(--danger-fond); color: #6e1a14; }
.alerte-critique svg { color: var(--danger); }
.alerte-attention { background: var(--attention-fond); color: #5a3b00; }
.alerte-attention svg { color: var(--attention); }
.alerte-ok { background: var(--succes-fond); color: #164a25; }
.alerte-ok svg { color: var(--succes); }
.alerte-info { background: var(--accent-clair); color: #173c6e; }
.alerte-info svg { color: var(--accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--texte-2);
}
.badge svg { width: 13px; height: 13px; }
.badge-critique { background: var(--danger-fond); color: var(--danger); }
.badge-attention { background: var(--attention-fond); color: var(--attention); }
.badge-ok { background: var(--succes-fond); color: var(--succes); }
.badge-info { background: var(--accent-clair); color: var(--accent-fonce); }
.badge-sombre { background: #e3e7ee; color: #3a4556; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Formulaires ---------- */

.formulaire { display: grid; gap: 14px; }
.grille-champs { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-champs .large { grid-column: 1 / -1; }
@media (max-width: 480px) { .grille-champs.souple { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .grille-champs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.champ { display: grid; gap: 5px; min-width: 0; align-content: start; }
.champ > span { font-size: 13.5px; font-weight: 600; color: var(--texte-2); }
.champ small { color: var(--texte-3); font-size: 12.5px; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--bord-fort);
  border-radius: 10px;
  background: #fff;
}
textarea { min-height: 76px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(31, 95, 180, .35);
  outline-offset: 1px;
  border-color: var(--accent);
}
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--accent); margin: 0; }

.champ-compact { gap: 3px; }
.champ-compact > span { font-size: 12.5px; }
.champ-compact input, .champ-compact select { min-height: 40px; padding: 7px 10px; font-size: 15px; }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.filtres .champ { flex: 1 1 150px; max-width: 240px; }
.filtres .champ.recherche { flex: 2 1 220px; max-width: 420px; }
.filtres .bouton { flex: none; }
.filtres .case { min-height: 40px; }
.plus-filtres { flex-basis: 100%; }
.plus-filtres summary { cursor: pointer; color: var(--accent); font-weight: 650; padding: 4px 0; width: max-content; }
.plus-filtres[open] summary { margin-bottom: 10px; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.puce span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bord-fort);
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.puce input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.puce input:focus-visible + span { outline: 3px solid rgba(31, 95, 180, .35); }

.onglets-filtre { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.onglets-filtre::-webkit-scrollbar { display: none; }
.onglets-filtre button {
  flex: none;
  border: 1px solid var(--bord-fort);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--texte-2);
  cursor: pointer;
}
.onglets-filtre button[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: #fff; }
.onglets-filtre .compte { opacity: .75; font-weight: 500; margin-left: 4px; }

details.plus-de-champs summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 4px 0; }
details.plus-de-champs[open] summary { margin-bottom: 10px; }

.message-erreur { color: var(--danger); background: var(--danger-fond); border-radius: 8px; padding: 9px 12px; margin: 0; }
.intertitre { font-size: 14px; font-weight: 700; color: var(--texte-2); margin: 18px 0 10px; }
.intertitre:first-child { margin-top: 0; }
.aide { font-size: 13px; color: var(--texte-3); }
.masque-montant { color: var(--texte-3); font-style: italic; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 17px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton:disabled { opacity: .6; cursor: default; }
.bouton.principal { background: var(--accent); color: #fff; }
.bouton.principal:hover:not(:disabled) { background: var(--accent-fonce); }
.bouton.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bord-fort); }
.bouton.secondaire:hover:not(:disabled) { background: var(--surface-2); }
.bouton.succes { background: var(--succes); color: #fff; }
.bouton.danger { background: var(--danger); color: #fff; }
.bouton.lien-danger { background: none; color: var(--danger); border-color: transparent; }
.bouton.whatsapp { background: #128c4a; color: #fff; }
.bouton.petit { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.bouton.plein { width: 100%; }
.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texte-2);
  cursor: pointer;
  font-size: 18px;
}
.bouton-icone:hover { background: var(--surface-2); }
.bouton-icone svg { width: 19px; height: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.actions-gauche { justify-content: flex-start; }

.bouton-flottant {
  position: fixed;
  right: 16px;
  bottom: calc(var(--barre-bas) + 16px + env(safe-area-inset-bottom));
  z-index: 15;
  box-shadow: 0 4px 14px rgba(22, 41, 74, .28);
  border-radius: 999px;
}
@media (min-width: 960px) { .bouton-flottant { display: none; } }

/* ---------- Tableaux et listes ---------- */

.defilement { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th {
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  color: var(--texte-3);
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
.tableau td { padding: 10px; border-bottom: 1px solid var(--grille); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tfoot td { font-weight: 700; border-top: 1px solid var(--bord); }
.tableau .muet { color: var(--texte-3); font-size: 13px; }
.tableau a { font-weight: 600; text-decoration: none; }
.col-large { display: none; }
@media (min-width: 760px) { .col-large { display: table-cell; } }

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--grille);
}
.liste > li:last-child { border-bottom: 0; }
.liste .principal-ligne { flex: 1; min-width: 0; }
.liste .principal-ligne strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .principal-ligne small { color: var(--texte-3); display: block; }
.liste .montant { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste .sortie { color: var(--danger); }
.liste > li.annule .principal-ligne strong, .liste > li.annule .montant { text-decoration: line-through; color: var(--texte-3); }
.annule-info { display: block; color: var(--danger); font-size: 12.5px; margin-top: 2px; }
.annule-info svg { width: 13px; height: 13px; vertical-align: -2px; }
.liste > li.jour-liste { display: block; border-bottom: 0; font-size: 12.5px; font-weight: 700; color: var(--texte-3); text-transform: uppercase; padding: 14px 0 2px; }
.liste > li.jour-liste:first-child { padding-top: 0; }
a.ligne-lien { color: inherit; text-decoration: none; }
.liste > li:has(> a.ligne-lien) { padding: 0; }
.liste a.ligne-lien { display: flex; align-items: center; gap: 12px; padding: 11px 4px; flex: 1; min-width: 0; border-radius: 8px; }
.liste a.ligne-lien:hover { background: var(--surface-2); }

.vide { color: var(--texte-3); text-align: center; padding: 18px 8px; margin: 0; }
.plus-de-resultats { display: flex; justify-content: center; padding-top: 12px; }

/* ---------- Dossiers ---------- */

.dossiers { display: grid; gap: 10px; }
.dossier-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  padding: 13px 14px;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  color: inherit;
  text-decoration: none;
  border-left: 4px solid var(--bord-fort);
}
.dossier-ligne:hover { box-shadow: 0 0 0 2px var(--accent-clair), var(--ombre); }
.dossier-ligne.statut-en_cours { border-left-color: var(--accent); }
.dossier-ligne.statut-en_attente { border-left-color: #d69a1c; }
.dossier-ligne.statut-pret { border-left-color: var(--succes); }
.dossier-ligne.statut-remis { border-left-color: #8a96a8; }
.dossier-ligne.statut-annule { border-left-color: #c9ced6; opacity: .8; }
.dossier-titre { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-titre .numero { color: var(--texte-3); font-weight: 600; font-size: 13px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.dossier-sous { color: var(--texte-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-droite { display: grid; justify-items: end; gap: 6px; align-content: start; text-align: right; }
.dossier-etape { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13.5px; }
.dossier-etape .ou { font-weight: 650; }
.dossier-etape .quand { color: var(--texte-3); }
.montant-ligne { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }

.progression { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.progression .piste { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.progression .piste > div { height: 100%; border-radius: 999px; background: var(--succes); }
.progression .texte { font-size: 12.5px; color: var(--texte-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Immobilier : biens, baux, loyers, propriétaires. */
.liste-biens .principal-ligne strong, .liste-loyers .principal-ligne strong { white-space: normal; overflow: visible; }
.liste-biens .loue-par { color: var(--accent); }
/* Le titre d'un bien est un lien, mais la liste reste calme : souligné au survol seulement. */
.liste-biens .principal-ligne a { text-decoration: none; }
.liste-biens .principal-ligne a:hover { text-decoration: underline; }
.bien-droite { display: grid; gap: 4px; justify-items: end; text-align: right; }
.petit-montant { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.ligne-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.liste > li.loyer-solde .principal-ligne strong { color: var(--texte-2); }

.bail-courant {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px; border-radius: var(--rayon); background: var(--surface-2);
}
.bail-courant small { display: block; color: var(--texte-3); font-size: 12.5px; }
.bail-chiffres { text-align: right; }
.bail-chiffres .montant { font-size: 18px; font-weight: 700; }
.bail-chiffres .montant small { display: inline; font-weight: 500; color: var(--texte-3); }

/* Fiche en deux colonnes : libellé à gauche, valeur à droite. */
.fiche { display: grid; gap: 0; margin: 0; }
.fiche > div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grille); }
.fiche > div:last-child { border-bottom: 0; }
.fiche dt { flex: none; width: 130px; color: var(--texte-3); font-size: 13.5px; }
.fiche dd { margin: 0; min-width: 0; }

/* Deux cases côte à côte : un nombre et son unité (% ou FCFA). */
.champ-double { display: flex; gap: 6px; }
.champ-double select { width: auto; flex: none; }
.separateur-champs { height: 1px; background: var(--grille); margin: 16px 0; }

/* Choix d'un client : recherche puis suggestions. */
.choix-client { display: grid; gap: 6px; }
.choix-libelle { font-size: 13.5px; font-weight: 600; color: var(--texte-2); }
.suggestions { display: grid; border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.suggestions button {
  display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 10px 12px;
  background: var(--surface); border: 0; border-bottom: 1px solid var(--grille); font: inherit; text-align: left; cursor: pointer;
}
.suggestions button:last-child { border-bottom: 0; }
.suggestions button:hover { background: var(--surface-2); }
.suggestions small { color: var(--texte-3); }
.client-choisi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--rayon); background: var(--accent-clair);
}

@media (max-width: 700px) {
  .fiche > div { display: grid; gap: 2px; }
  .fiche dt { width: auto; }
  /* Sur un téléphone, le nom et le bien prennent toute la largeur ; le montant
     et les boutons passent au rang du dessous. */
  .liste-loyers > li, .liste-biens > li { flex-wrap: wrap; row-gap: 8px; }
  .liste-loyers > li > .principal-ligne, .liste-biens > li > .principal-ligne { flex-basis: 100%; }
  .liste-loyers .montant { margin-right: auto; }
  .bien-droite { flex-direction: row; display: flex; align-items: center; gap: 10px; width: 100%; }
}

/* Travail du jour : tâches régulières du cabinet, et qui les fait. */
.barre-jour { flex-wrap: wrap; gap: 12px; }
.navigation-jour { display: flex; align-items: center; gap: 8px; }
.navigation-jour h2 { margin: 0; }
.navigation-jour small { color: var(--texte-3); font-size: 12.5px; }
.lien-bouton {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.avancement { display: flex; align-items: center; gap: 10px; min-width: 190px; flex: 1; max-width: 340px; margin-left: auto; }
.avancement .piste { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.avancement .piste > div { height: 100%; border-radius: 999px; background: var(--accent); }
.avancement.fini .piste > div { background: var(--succes); }
.avancement strong { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--texte-2); }

.groupe-tete {
  display: flex; align-items: center; gap: 8px; padding: 12px 0 2px;
  border-top: 1px solid var(--grille); color: var(--texte-2); font-size: 13px;
}
.groupe-taches:first-of-type .groupe-tete { border-top: 0; padding-top: 2px; }
.groupe-tete svg { width: 16px; height: 16px; color: var(--texte-3); }

.coche {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 2px solid var(--bord-fort); background: var(--surface); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.coche:hover:not(:disabled) { border-color: var(--accent); }
.coche:disabled { opacity: .45; cursor: default; }
.coche svg { width: 18px; height: 18px; }
.tache.faite .coche { background: var(--succes); border-color: var(--succes); }
.tache.faite .principal-ligne strong { color: var(--texte-3); text-decoration: line-through; }
.tache-faite { color: var(--succes); }
/* Un intitulé de tâche se lit en entier, même sur un téléphone. */
.tache .principal-ligne strong, .liste-taches .principal-ligne strong { white-space: normal; overflow: visible; }
.liste > li.retiree .principal-ligne strong { color: var(--texte-3); }

.jours-semaine { display: flex; flex-wrap: wrap; gap: 6px; }
.jour-case input { position: absolute; opacity: 0; pointer-events: none; }
.jour-case span {
  display: block; padding: 8px 12px; border: 1px solid var(--bord-fort);
  border-radius: 999px; font-size: 13px; cursor: pointer;
}
.jour-case input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.jour-case input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.tuiles-serrees { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grille-taches th, .grille-taches td { white-space: nowrap; }
.jour-entete { display: grid; line-height: 1.2; font-size: 11px; color: var(--texte-3); }
/* Sur un téléphone, le nom de la tâche reste en place pendant qu'on fait glisser les jours. */
@media (max-width: 760px) {
  .grille-taches th:first-child, .grille-taches td:first-child {
    position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; max-width: 150px; white-space: normal;
    background: var(--surface); box-shadow: 1px 0 0 var(--grille);
  }
}
.case-suivi { text-align: center; }
.pastille-faite {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--succes-fond); color: var(--succes); font-size: 11px; font-weight: 700;
}
.pastille-vide { color: var(--bord-fort); }
.bouton-icone:disabled { opacity: .35; cursor: default; }
.sous-texte { display: block; color: var(--texte-3); font-size: 12px; }

/* Étapes d'un dossier : frise verticale. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; }
.etape {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 12px;
  padding-bottom: 16px;
}
.etape:last-child { padding-bottom: 0; }
.etape::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--bord);
}
.etape:last-child::before { display: none; }
.etape-rond {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--texte-3);
  border: 2px solid var(--bord-fort);
  font-weight: 700;
  font-size: 14px;
  z-index: 1;
}
.etape-rond svg { width: 18px; height: 18px; }
.etape.fait .etape-rond { background: var(--succes); border-color: var(--succes); color: #fff; }
.etape.en_cours .etape-rond { background: #fff4dc; border-color: #d69a1c; color: #7a4f00; }
.etape.sans_objet .etape-rond { border-style: dashed; }
.etape.actuelle .etape-rond { box-shadow: 0 0 0 4px var(--accent-clair); }
.etape-corps { min-width: 0; padding-top: 5px; }
.etape-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.etape-nom { font-weight: 700; font-size: 15.5px; }
.etape.sans_objet .etape-nom { color: var(--texte-3); text-decoration: line-through; }
.etape-infos { color: var(--texte-2); font-size: 13.5px; margin-top: 2px; }
.etape-reference { display: inline-block; margin-top: 4px; font-weight: 650; font-variant-numeric: tabular-nums; background: var(--surface-2); padding: 3px 8px; border-radius: 6px; font-size: 13.5px; }
.etape-note { color: var(--texte-3); font-size: 13px; margin-top: 3px; white-space: pre-line; }
.etape-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }

.segments { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: 10px; overflow: hidden; background: var(--surface); }
.segments button {
  border: 0;
  border-right: 1px solid var(--bord);
  background: none;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-2);
  cursor: pointer;
  min-height: 34px;
}
.segments button:last-child { border-right: 0; }
.segments button:hover { background: var(--surface-2); }
.segments button[aria-pressed="true"] { background: var(--marque); color: #fff; }
.segments button[aria-pressed="true"][data-etat="fait"] { background: var(--succes); }
.segments button[aria-pressed="true"][data-etat="en_cours"] { background: #b57a07; }

.definitions { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 14px; }
.definitions dt { color: var(--texte-3); }
.definitions dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }

.chiffres-dossier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chiffres-dossier > div { background: var(--surface-2); border-radius: 10px; padding: 9px 10px; }
.chiffres-dossier span { display: block; font-size: 12px; color: var(--texte-3); }
.chiffres-dossier strong { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .chiffres-dossier { grid-template-columns: 1fr; gap: 6px; }
  .chiffres-dossier > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
}

.message-client { border-left: 3px solid var(--or); background: var(--or-clair); padding: 9px 12px; border-radius: 0 8px 8px 0; font-size: 14px; white-space: pre-line; }

.historique { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.historique li { display: grid; gap: 2px; font-size: 13.5px; padding-left: 14px; border-left: 2px solid var(--bord); }
.historique .quand { color: var(--texte-3); font-size: 12.5px; }
.changements { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; color: var(--texte-2); }
.changements s { color: var(--texte-3); }

/* ---------- Accès à l'espace client ---------- */

.acces { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.acces .qr { width: 96px; height: 96px; }
.acces .qr svg { width: 100%; height: 100%; display: block; }
.acces-valeurs { display: grid; gap: 6px; }
.acces-valeurs div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.acces-valeurs span { color: var(--texte-3); font-size: 13px; min-width: 96px; }
.acces-valeurs strong { font-size: 18px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.acces-valeurs .adresse { font-size: 13.5px; letter-spacing: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Tableau de bord ---------- */

.parcours { display: grid; gap: 8px; }
.parcours-ligne {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: inherit;
  text-decoration: none;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 8px;
}
.parcours-ligne:hover { background: var(--surface-2); }
.parcours-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcours-barre { display: flex; height: 16px; gap: 2px; }
.parcours-barre span { display: block; height: 100%; min-width: 3px; }
.parcours-barre .encours { background: #d69a1c; border-radius: 0 4px 4px 0; }
.parcours-barre .afaire { background: #9fb3cf; }
.parcours-barre .afaire:first-child { border-radius: 0; }
.parcours-barre span:last-child { border-radius: 0 4px 4px 0; }
.parcours-nombre { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texte-2); margin-bottom: 10px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.cle-barre { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.rdv-jour { display: grid; gap: 8px; }

/* ---------- Agenda ---------- */

.agenda-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agenda-barre .titre-semaine { flex: 1 1 200px; font-weight: 700; font-size: 16px; text-align: center; }
.semaine { display: grid; gap: 10px; }
@media (min-width: 1100px) { .semaine { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } }
.jour {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 10px;
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
}
.jour.aujourdhui { box-shadow: 0 0 0 2px var(--accent), var(--ombre); }
.jour.ferme { background: #f7f8fb; }
.jour-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.jour-tete strong { text-transform: capitalize; font-size: 14px; }
.jour-tete span { color: var(--texte-3); font-size: 12.5px; }
.jour-vide { color: var(--texte-3); font-size: 13px; padding: 2px 0; }
.rdv {
  display: grid;
  gap: 1px;
  text-align: left;
  width: 100%;
  border: 0;
  border-left: 4px solid var(--accent);
  background: var(--accent-clair);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  font-size: 13.5px;
}
.rdv:hover { filter: brightness(.97); }
.rdv .heure { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rdv .titre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.rdv .qui { color: var(--texte-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.rdv.occupation { border-left-color: #6b7788; background: #eceff4; }
.rdv.a_confirmer { border-left-color: #d69a1c; background: #fff4dc; }
.rdv.annule, .rdv.refuse { opacity: .55; text-decoration: line-through; }
.rdv.honore { border-left-color: var(--succes); background: var(--succes-fond); }
.rdv.masque { cursor: default; border-left-color: #9aa5b5; background: repeating-linear-gradient(135deg, #eef1f5 0 6px, #f6f7fa 6px 12px); }

.demande { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--grille); }
.demande:last-child { border-bottom: 0; padding-bottom: 0; }
.demande:first-child { padding-top: 0; }
.demande-tete { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.demande-tete strong { font-size: 15.5px; }
.demande .message { font-size: 13.5px; color: var(--texte-2); white-space: pre-line; background: var(--surface-2); padding: 7px 10px; border-radius: 8px; }

.horaires { display: grid; gap: 8px; }
.horaire-jour { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; }
.horaire-jour > span { font-weight: 600; text-transform: capitalize; }
.horaire-plages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.horaire-plages input { width: 96px; min-height: 38px; padding: 6px 8px; font-size: 15px; }

/* ---------- Graphiques ---------- */

.graphique { position: relative; min-width: 0; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique text { font-family: var(--police); }
.graphique .tick { fill: var(--texte-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphique .etiquette { fill: var(--texte-2); font-size: 12px; }
.graphique .valeur { fill: var(--texte); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.graphique .zone-survol { fill: transparent; cursor: crosshair; }
.graphique .barre:hover, .graphique .barre:focus { opacity: .8; outline: none; }
.cle-ligne { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.cle-point { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.infobulle {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 9px;
  box-shadow: var(--ombre);
  padding: 8px 10px;
  font-size: 13px;
  min-width: 140px;
  white-space: nowrap;
}
.infobulle .titre { color: var(--texte-3); font-size: 12px; margin-bottom: 4px; }
.infobulle .rang { display: flex; align-items: center; gap: 8px; }
.infobulle .rang b { font-variant-numeric: tabular-nums; }
.infobulle .rang span { color: var(--texte-2); }
details.donnees summary { cursor: pointer; color: var(--texte-3); font-size: 13px; margin-top: 8px; }

.barres-h { display: grid; gap: 10px; }
.barre-h { display: grid; grid-template-columns: minmax(96px, 36%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.barre-h-libelle { color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-h-piste { display: block; height: 14px; }
.barre-h-marque { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.barre-h-valeur { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Messages, fenêtres ---------- */

.toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--barre-bas) + 18px + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(92vw, 420px);
}
@media (min-width: 960px) { .toasts { bottom: 24px; } }
.toast {
  background: var(--marque);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  font-weight: 550;
  transition: opacity .3s, transform .3s;
}
.toast-succes { background: var(--succes); }
.toast-erreur { background: var(--danger); }
.toast.sortie { opacity: 0; transform: translateY(8px); }
.toast .bouton { margin-left: 8px; }

.dialogue {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(94vw, 560px);
  max-height: 92vh;
  background: var(--surface);
  color: var(--texte);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.dialogue.large { width: min(96vw, 760px); }
.dialogue::backdrop { background: rgba(22, 41, 74, .5); }
.dialogue-corps { display: grid; gap: 14px; padding: 18px; }
.dialogue-corps h2 { font-size: 18px; }
.dialogue-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialogue-contenu { display: grid; gap: 12px; }

.feuille-menu { display: grid; gap: 4px; }
.feuille-menu a, .feuille-menu button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 10px;
  border-radius: 10px;
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  background: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.feuille-menu a:hover, .feuille-menu button:hover { background: var(--surface-2); }
.feuille-menu svg { width: 22px; height: 22px; color: var(--texte-2); }
.feuille-menu .pastille { margin-left: auto; }

.recherche-client { position: relative; }
.suggestions { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.suggestions button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.suggestions button:hover, .suggestions button:focus-visible { background: var(--surface-2); }
.suggestions small { color: var(--texte-3); display: block; }
.client-choisi { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--accent-clair); border-radius: 10px; padding: 10px 12px; }

.noscript { padding: 20px; text-align: center; }

/* ---------- Impression : reçus, fiches d'accès, fiches de dossier ---------- */

#zone-impression { display: none; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 12px; }
  body.impression > *:not(#zone-impression) { display: none !important; }
  body.impression #zone-impression { display: block !important; }
  body:not(.impression) .entete, body:not(.impression) .menu-lateral, body:not(.impression) .barre-bas,
  body:not(.impression) .bouton, body:not(.impression) .bouton-icone, body:not(.impression) .filtres,
  body:not(.impression) .toasts, body:not(.impression) .non-imprime, body:not(.impression) .bouton-flottant { display: none !important; }
  .appli { display: block; }
  .vue { padding: 0; max-width: none; }
  .carte, .tuile { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .defilement { overflow: visible; margin: 0; padding: 0; }
  .col-large { display: table-cell; }
}

.document { color: #111; font-size: 12.5px; line-height: 1.45; }
.document * { color: inherit; }
.document-tete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid #16294a; padding-bottom: 8px; }
.document-cabinet { display: flex; gap: 10px; align-items: center; }
.document-cabinet img { width: 46px; height: 46px; }
.document-cabinet strong { font-size: 17px; display: block; color: #16294a; letter-spacing: .01em; }
.document-cabinet small { display: block; color: #444; font-size: 11px; }
.document-titre { text-align: right; }
.document-titre strong { display: block; font-size: 15px; letter-spacing: .04em; }
.document-titre span { display: block; font-size: 12px; }
.document-ligne { display: grid; grid-template-columns: 34mm 1fr; gap: 3mm; margin-top: 2.2mm; }
.document-ligne > span:first-child { color: #555; }
.document-montant { display: inline-block; border: 1.5px solid #16294a; border-radius: 2mm; padding: 2mm 4mm; font-size: 17px; font-weight: 700; margin-top: 3mm; }
.document-lettres { margin-top: 2mm; font-style: italic; }
.document-situation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm; margin-top: 3mm; }
.document-situation div { border: 1px solid #bbb; border-radius: 1.5mm; padding: 1.5mm 2.5mm; }
.document-situation span { display: block; font-size: 10.5px; color: #555; }
.document-situation strong { font-size: 13.5px; }
.document-acces { display: grid; grid-template-columns: 1fr 30mm; gap: 4mm; align-items: center; margin-top: 4mm; border: 1.5px dashed #16294a; border-radius: 2mm; padding: 3mm 4mm; background: #f5f7fb; }
.document-acces h3 { font-size: 13px; margin: 0 0 1.5mm; color: #16294a; }
.document-acces .valeurs { display: grid; grid-template-columns: max-content 1fr; gap: 1mm 3mm; font-size: 12.5px; }
.document-acces .valeurs strong { font-size: 14.5px; letter-spacing: .08em; }
.document-acces .qr svg { width: 30mm; height: 30mm; display: block; }
.document-acces small { display: block; margin-top: 1.5mm; font-size: 10.5px; color: #444; }
.document-signatures { display: flex; justify-content: space-between; gap: 10mm; margin-top: 7mm; }
.document-signatures div { flex: 1; border-top: 1px solid #999; padding-top: 1.5mm; font-size: 11px; color: #444; min-height: 14mm; }
.document-pied { margin-top: 4mm; font-size: 10px; color: #555; text-align: center; }
.document-annulation {
  border: 2px solid #b3261e; color: #b3261e; font-weight: 800; letter-spacing: .06em;
  padding: 2mm 3mm; border-radius: 2mm; margin-top: 3mm; text-align: center; font-size: 13px;
}
.document-annule .document-montant { color: #b3261e; border-color: #b3261e; text-decoration: line-through; }
.talon-annule { color: #b3261e; font-weight: 800; }
.coupure { border: 0; border-top: 1.5px dashed #888; margin: 7mm 0 5mm; position: relative; }
.coupure::after { content: "✂  à découper — talon conservé par le cabinet"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 6px; font-size: 10px; color: #777; }
.talon { font-size: 11.5px; display: grid; gap: 1.2mm; }
.fiche-acces-page { max-width: 150mm; margin: 0 auto; }
.fiche-acces-page .document-acces { grid-template-columns: 1fr 42mm; padding: 5mm 6mm; }
.fiche-acces-page .document-acces .qr svg { width: 42mm; height: 42mm; }
.fiche-acces-page ol { margin: 4mm 0 0; padding-left: 5mm; display: grid; gap: 1.5mm; }
.fiche-dossier .etapes-imprimees { width: 100%; border-collapse: collapse; margin-top: 4mm; font-size: 12px; }
.fiche-dossier .etapes-imprimees th, .fiche-dossier .etapes-imprimees td { border: 1px solid #bbb; padding: 1.8mm 2.5mm; text-align: left; }
.fiche-dossier .etapes-imprimees th { background: #eef2f8; }