/* Créances et relances — même grammaire que l'assistante du cabinet : fond crème, violet, titres en Instrument Serif.
   Téléphone d'abord (360 px), puis tablette et ordinateur. Cibles tactiles ≥ 44 px. Polices servies d'ici. */
@font-face { font-family: 'Instrument Sans'; font-weight: 400 600; font-display: swap; src: url(/sans.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-display: swap; src: url(/serif.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --fond: #faf7f2; --carte: #ffffff; --creux: #f3efe8; --trait: #e6dfd3; --trait-fort: #cfc6b8;
  --encre: #2b2733; --doux: #6d6679; --accent: #6a4bc4; --accent-vif: #7c5cd6; --accent-doux: #efeaf9; --sur-accent: #ffffff;
  --ok: #2f7d55; --ok-doux: #e5f2ea; --ambre: #9a5b06; --ambre-doux: #fbefd9; --rouge: #b3304a; --rouge-doux: #fbe6ea;
  --ombre: 0 1px 2px rgba(43, 39, 51, .06), 0 2px 8px rgba(43, 39, 51, .04);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rayon: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --fond: #17151c; --carte: #1f1c26; --creux: #272330; --trait: #352f40; --trait-fort: #4a4258;
  --encre: #ece9f1; --doux: #a59db4; --accent: #b49dff; --accent-vif: #b49dff; --accent-doux: #2c2540; --sur-accent: #17151c;
  --ok: #7ccf9f; --ok-doux: #1d2f25; --ambre: #f0b45e; --ambre-doux: #33280f; --rouge: #ff7d91; --rouge-doux: #3a1d25;
  --ombre: none;
} }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.5 var(--sans); min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.discret { color: var(--doux); font-size: 14px; }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(30px, 6vw, 40px); }
h2 { font-size: 26px; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }
p { margin: 0; }

/* ── Cadre ── */
.entete { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait); padding: max(10px, env(safe-area-inset-top)) 16px 10px; }
.entete-int { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marque svg { flex: none; }
.marque b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; }
.marque span { display: block; font-size: 13px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onglets { margin-left: auto; display: flex; gap: 4px; }
.onglets a { text-decoration: none; color: var(--doux); padding: 9px 14px; border-radius: 999px; font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 6px; min-height: 40px; }
.onglets a[aria-current="page"] { background: var(--accent-doux); color: var(--accent); }
.onglets a:hover { color: var(--encre); }
.onglets svg { width: 18px; height: 18px; }
main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 110px; display: grid; gap: 28px; }
@media (max-width: 760px) {
  /* backdrop-filter ferait de l'en-tête le repère des éléments fixes : la barre d'onglets n'irait plus en bas. */
  .entete { backdrop-filter: none; background: var(--fond); }
  .onglets { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; justify-content: space-around; background: var(--carte); border-top: 1px solid var(--trait);
    padding: 6px 4px max(6px, env(safe-area-inset-bottom)); z-index: 6; }
  .onglets a { flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 8px; min-width: 64px; border-radius: 12px; }
  .onglets svg { width: 22px; height: 22px; }
}

/* ── Éléments ── */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.pad { padding: 18px; }
.titre-section { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--trait-fort); background: var(--carte); cursor: pointer; font-weight: 500; text-decoration: none; color: var(--encre); white-space: nowrap; }
.bouton:hover { border-color: var(--accent); }
.bouton.plein { background: var(--accent-vif); border-color: var(--accent-vif); color: var(--sur-accent); }
.bouton.plein:hover { filter: brightness(1.05); }
.bouton.petit { min-height: 36px; padding: 0 12px; font-size: 14px; }
.bouton.discret-b { border-color: transparent; background: transparent; color: var(--accent); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton svg { width: 18px; height: 18px; }
label.champ { display: grid; gap: 6px; font-size: 14px; color: var(--doux); }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--carte); color: var(--encre); }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  background: var(--creux); color: var(--encre); }
.pastille.ok { background: var(--ok-doux); color: var(--ok); }
.pastille.attention { background: var(--ambre-doux); color: var(--ambre); }
.pastille.alerte { background: var(--rouge-doux); color: var(--rouge); }
.pastille.accent { background: var(--accent-doux); color: var(--accent); }
.vide { text-align: center; color: var(--doux); padding: 32px 16px; display: grid; gap: 12px; justify-items: center; }
.vide svg { width: 40px; height: 40px; color: var(--trait-fort); }
.note { background: var(--creux); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--doux); }
.note.attention { background: var(--ambre-doux); color: var(--ambre); }

/* ── Tableau de bord ── */
.indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.indicateur { padding: 16px; display: grid; gap: 4px; align-content: start; position: relative; overflow: hidden; }
.indicateur::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--trait); }
.indicateur.ok::before { background: var(--ok); } .indicateur.attention::before { background: var(--ambre); } .indicateur.alerte::before { background: var(--rouge); }
.indicateur .lib { font-size: 13px; color: var(--doux); }
.indicateur .val { font-family: var(--serif); font-size: clamp(26px, 5vw, 34px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicateur .det { font-size: 13px; color: var(--doux); }
.a-faire { display: grid; gap: 0; }
.a-faire a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--encre); border-top: 1px solid var(--trait); min-height: 52px; }
.a-faire a:first-child { border-top: 0; }
.a-faire a:hover { background: var(--creux); }
.a-faire .puce { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-vif); flex: none; }
.a-faire .fl { margin-left: auto; color: var(--doux); }

/* ── Listes de créances ── */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres button { border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 14px; min-height: 38px; }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.filtres .sep { width: 1px; height: 24px; background: var(--trait); margin: 0 4px; }
.recherche { flex: 1 1 220px; max-width: 340px; }
.liste { display: grid; }
.creance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; border-top: 1px solid var(--trait);
  text-decoration: none; color: inherit; align-items: center; min-height: 64px; }
.creance:first-child { border-top: 0; }
.creance:hover { background: var(--creux); }
.creance .qui { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creance .quoi { font-size: 14px; color: var(--doux); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; grid-column: 1; }
.creance .montant { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; font-size: 17px; }
.creance .droite { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 4px; }
.etapes { display: inline-flex; gap: 3px; align-items: center; margin-right: 6px; vertical-align: middle; }
.etapes i { width: 9px; height: 9px; border-radius: 50%; background: var(--trait-fort); display: block; }
.etapes i.fait { background: var(--accent-vif); }
.total-liste { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--trait); background: var(--creux);
  border-radius: 0 0 var(--rayon) var(--rayon); font-size: 14px; color: var(--doux); }
.total-liste b { color: var(--encre); font-variant-numeric: tabular-nums; }

/* ── Fiche ── */
.voile { position: fixed; inset: 0; background: rgba(23, 21, 28, .45); z-index: 20; display: flex; justify-content: flex-end; }
.panneau { background: var(--fond); width: min(620px, 100%); height: 100%; overflow-y: auto; padding: 0 0 40px; box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
  animation: entree .18s ease-out; }
@keyframes entree { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panneau { animation: none; } }
.panneau-tete { position: sticky; top: 0; background: var(--fond); border-bottom: 1px solid var(--trait); padding: max(14px, env(safe-area-inset-top)) 18px 14px;
  display: flex; gap: 12px; align-items: start; z-index: 1; }
.panneau-tete h2 { font-size: 28px; }
.panneau-tete .fermer { margin-left: auto; }
.panneau-corps { padding: 18px; display: grid; gap: 18px; }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px; }
.faits div { display: grid; gap: 2px; }
.faits dt { font-size: 13px; color: var(--doux); }
.faits dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gros-montant { font-family: var(--serif); font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.onglets-msg { display: flex; gap: 4px; background: var(--creux); padding: 4px; border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; }
.onglets-msg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; min-height: 36px; white-space: nowrap; }
.onglets-msg button[aria-selected="true"] { background: var(--carte); box-shadow: var(--ombre); font-weight: 600; }
.texte-pret { white-space: pre-wrap; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 14px; font-size: 15px; line-height: 1.5; }
.journal { display: grid; gap: 0; }
.journal li { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--trait); align-items: start; }
.journal li:first-child { border-top: 0; }
.journal ul { margin: 0; padding: 0; }
.journal .date { font-size: 13px; color: var(--doux); font-variant-numeric: tabular-nums; min-width: 78px; }
.bascule { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.bascule input { width: 20px; height: 20px; accent-color: var(--accent-vif); }

/* ── Import ── */
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.depot { border: 2px dashed var(--trait-fort); border-radius: var(--rayon); padding: 22px; display: grid; gap: 10px; justify-items: start; background: var(--carte); }
.depot.survol { border-color: var(--accent-vif); background: var(--accent-doux); }
.correspondance { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.3fr); gap: 8px 14px; align-items: center; }
.correspondance .lib { font-size: 14px; }
.ecartee { font-size: 13px; color: var(--rouge); }
.tableau-defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
th { font-weight: 600; color: var(--doux); font-size: 13px; background: var(--creux); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

/* ── Connexion ── */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.connexion .carte { width: min(400px, 100%); padding: 28px; display: grid; gap: 18px; text-align: center; justify-items: center; }
.code { letter-spacing: .5em; text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; max-width: 260px; }
.erreur { color: var(--rouge); font-size: 14px; min-height: 20px; }

.annonce { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--encre); color: var(--fond); padding: 10px 18px;
  border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; max-width: calc(100% - 32px); }
.annonce.vue { opacity: 1; }
.chargement { height: 120px; border-radius: var(--rayon); background: linear-gradient(90deg, var(--creux), var(--carte), var(--creux)); background-size: 200% 100%;
  animation: luire 1.2s infinite; }
@keyframes luire { to { background-position: -200% 0; } }
.imprimable { display: none; }

/* ── Impression : la liste d'appels seule, en tableau sobre ── */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .entete, .onglets, main > *:not(.imprimable), .annonce, .voile { display: none !important; }
  main { padding: 0; max-width: none; }
  .imprimable { display: block !important; }
  .imprimable h1 { font-size: 20pt; margin-bottom: 4pt; }
  .imprimable table { font-size: 10pt; }
  .imprimable th { background: #eee; color: #000; }
  .imprimable td, .imprimable th { border: 1px solid #999; white-space: normal; }
  .imprimable td.res { width: 30%; }
  .imprimable tr:last-child td { border-bottom: 1px solid #999; }
  .imprimable td.nw { white-space: nowrap; }
}