/* ════════════════════════════════════════════════════════════════════════════
   Module « demo » — documents reçus
   Reprend les jetons de la charte : navy, corail, crème, encre.
   L'ambre signale ce qui attend un avis, le vert ce qui est réglé. Ces deux
   couleurs sont sémantiques : elles ne servent jamais de décor.
   ════════════════════════════════════════════════════════════════════════════ */
.demo-module {
  --dm-vert:#1D6F52; --dm-vert-fond:#E6F1EC;
  --dm-ambre:#96601A; --dm-ambre-fond:#FBF0DF;
  --dm-bordure:var(--kanso-bordure, #ECE4DA);
  --dm-surface:#fff; --dm-encre:var(--kanso-encre, #3a3550);
  --dm-douce:var(--kanso-encre-douce, #6b6780);
  --dm-navy:var(--kanso-navy, #140E59);
  color:var(--dm-encre); font-size:14px; line-height:1.55;
}
.demo-entete h1 { font-family:Lato,sans-serif; font-size:26px; font-weight:900;
  letter-spacing:-.4px; color:var(--dm-navy); margin:0 0 4px; }
.demo-entete p { margin:0; color:var(--dm-douce); max-width:64ch; }

/* Six cartes : une rangee qui se comprime finit par couper les libelles. On
   la laisse se replier, chaque carte gardant sa largeur lisible. */
.demo-bilan { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px; background:var(--dm-bordure);
  border:1px solid var(--dm-bordure); border-radius:3px; overflow:hidden;
  margin:24px 0; }
.demo-bloc { background:var(--dm-surface); padding:14px 18px;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  border:0; font:inherit; cursor:pointer; position:relative;
  transition:background .12s ease; }
.demo-bloc:hover { background:#FDFBF9; }
.demo-bloc:focus-visible { outline:2px solid var(--kanso-corail,#EF7D53);
  outline-offset:-2px; }
/* La carte active se marque d'un filet, pas d'un aplat : on doit savoir ce
   qu'on regarde sans que la carte crie plus fort que le tableau. */
.demo-bloc.actif::after { content:''; position:absolute; left:0; right:0;
  bottom:0; height:3px; background:var(--dm-navy); }
.demo-bloc.attention.actif::after { background:var(--dm-ambre); }
.demo-bloc.ecart.actif::after { background:#3B3D8F; }
.demo-bloc .n { font-family:Lato,sans-serif; font-weight:900; font-size:24px;
  line-height:1.1; color:var(--dm-navy); font-variant-numeric:tabular-nums; }
.demo-bloc .l { font-size:12.5px; color:var(--dm-douce); margin-top:2px; }
.demo-bloc.attention { background:var(--dm-ambre-fond); }
/* L ecart a sa couleur propre : il ne dit pas « attention », il dit « quelqu un
   est passe par la ». Ce n est pas une alerte, c est un fait a arbitrer. */
.demo-bloc.ecart { background:#EEF0FA; }
.demo-bloc.ecart .n, .demo-bloc.ecart .l { color:#3B3D8F; }
.demo-bloc.attention .n, .demo-bloc.attention .l { color:var(--dm-ambre); }

.demo-colonnes { display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:24px; align-items:start; }
@media (max-width:1180px) { .demo-colonnes { grid-template-columns:minmax(0,1fr); } }

.demo-cadre { background:var(--dm-surface); border:1px solid var(--dm-bordure);
  border-radius:3px; overflow:hidden; }
.demo-cadre > header { padding:14px 20px; border-bottom:1px solid var(--dm-bordure);
  display:flex; align-items:baseline; justify-content:space-between; }
.demo-cadre h2 { font-family:Lato,sans-serif; font-size:15px; font-weight:700;
  color:var(--dm-navy); margin:0; }
.demo-cadre .compte { font-size:12.5px; color:var(--dm-douce); }
/* Les acces vivent dans l'en-tete, discrets : ils ouvrent le dossier reel, ce
   qui vaut mieux qu'une promesse ecrite quelque part que tout est bien range. */
.demo-acces { display:flex; align-items:baseline; gap:16px; }
.demo-acces a { font-size:12.5px; font-weight:600; color:var(--dm-navy);
  text-decoration:none; border-bottom:1px solid rgba(20,14,89,.22);
  padding-bottom:1px; }
.demo-acces a:hover { border-bottom-color:var(--kanso-corail,#EF7D53);
  color:var(--kanso-corail,#EF7D53); }

.demo-defile { overflow-x:auto; }
.demo-module table { width:100%; border-collapse:collapse; }
.demo-module thead th { font-family:Lato,sans-serif; font-size:10.5px;
  font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--dm-douce); text-align:left; padding:10px 14px; background:#FDFBF9;
  border-bottom:1px solid var(--dm-bordure); white-space:nowrap; }
.demo-module thead th.col-lieu { min-width:190px; }
.demo-module th.col-action, .demo-module td.col-action { width:112px; }
.demo-module tbody td { padding:13px 14px; border-bottom:1px solid var(--dm-bordure);
  vertical-align:middle; }
.demo-module tbody tr:last-child td { border-bottom:none; }
.demo-module tbody tr.avis { background:var(--dm-ambre-fond);
  box-shadow:inset 3px 0 0 var(--dm-ambre); }
.demo-module tbody tr.faite { background:transparent; }
.demo-module tbody tr.faite td { color:var(--dm-douce); }
.demo-module tbody tr.faite .demo-piece { color:var(--dm-encre); }
.demo-module tbody tr.reglee { background:var(--dm-vert-fond);
  box-shadow:inset 3px 0 0 var(--dm-vert); }
.demo-module tbody tr.ecart { background:#EEF0FA; box-shadow:inset 3px 0 0 #3B3D8F; }
/* Estomper plutot que masquer : la ligne reste a sa place, on garde le volume
   de ce qu'on ne regarde pas. Cacher ferait croire que le reste a disparu. */
.demo-module tbody tr.attenue { opacity:.32; }
.demo-module tbody tr.attenue:hover { opacity:.62; }
.demo-certitude.regle { color:var(--dm-vert); }
.demo-certitude.ecart { color:#3B3D8F; font-weight:600; }

.demo-piece { font-weight:600; color:var(--dm-navy); text-decoration:none; }
a.demo-piece:hover { text-decoration:underline; }
.demo-type { font-size:12.5px; color:var(--dm-douce); margin-top:1px; }
.demo-de .societe { font-weight:600; font-size:13px; }
.demo-de .adresse { font-size:12px; color:var(--dm-douce);
  font-family:ui-monospace,Menlo,monospace; }
.demo-quand { font-size:13px; color:var(--dm-douce); white-space:nowrap;
  font-variant-numeric:tabular-nums; }

.demo-module select { font:inherit; font-size:13px; color:var(--dm-encre);
  background:var(--dm-surface); border:1px solid var(--dm-bordure);
  border-radius:3px; padding:7px 9px; width:100%; min-width:170px; cursor:pointer; }
.demo-certitude { font-size:12px; color:var(--dm-douce); margin-top:5px; }
.demo-certitude.doute { color:var(--dm-ambre); font-weight:600; }

.demo-bouton { font-family:Lato,sans-serif; font-weight:700; font-size:13px;
  border:0; border-radius:3px; padding:8px 15px; cursor:pointer;
  background:var(--kanso-corail, #EF7D53); color:#fff; white-space:nowrap; }
.demo-bouton:hover { background:var(--kanso-corail-fonce, #e2673c); }
.demo-bouton[hidden] { display:none; }
.demo-bouton:disabled { opacity:.6; cursor:default; }
/* « classé » n'est pas une bonne nouvelle à célébrer, c'est une ligne finie.
   Elle se lit, elle n'attire pas — la couleur est réservée à ce qui attend. */
/* La recherche : discrete, pleine largeur, juste sous l'en-tete du dossier.
   Elle n'annonce rien — on la trouve quand on en a besoin. */
.demo-chercher { padding:12px 20px 0; }
.demo-chercher input { width:100%; font:inherit; font-size:13.5px;
  padding:9px 13px; border:1px solid var(--dm-bordure); border-radius:3px;
  background:var(--dm-surface); color:var(--dm-encre); }
.demo-chercher input:focus { outline:2px solid rgba(20,14,89,.16);
  outline-offset:-2px; border-color:rgba(20,14,89,.35); }
.demo-module tbody tr.demo-rien td { padding:22px 20px; color:var(--dm-douce);
  font-size:13.5px; font-style:italic; }

.demo-fait { font-size:12px; color:var(--dm-douce); font-weight:600;
  letter-spacing:.4px; text-transform:lowercase;
  border:1px solid var(--dm-bordure); border-radius:20px; padding:3px 11px;
  background:var(--dm-surface); white-space:nowrap;
  white-space:nowrap; }
/* Le bouton et la marque cohabitent : deplace une fois ne veut pas dire fige.
   La marque s efface des qu on rouvre le menu, sinon elle contredit l ecran. */
.demo-bouton:not([hidden]) + .demo-fait { display:none; }

.demo-journal ol { list-style:none; margin:0; padding:0; }
.demo-journal li { padding:12px 20px; border-bottom:1px solid var(--dm-bordure);
  font-size:13px; }
.demo-journal li:last-child { border-bottom:none; }
.demo-journal .heure { font-size:11.5px; color:var(--dm-douce);
  font-variant-numeric:tabular-nums; }
.demo-journal .quoi { margin-top:2px; }
.demo-journal .quoi strong { color:var(--dm-navy); }
.demo-vide { padding:20px; color:var(--dm-douce); font-size:13px; }

.demo-message { margin:0 0 16px; padding:11px 15px; border-radius:3px;
  font-size:13.5px; background:var(--dm-ambre-fond); color:var(--dm-ambre); }
.demo-message.erreur { background:#F8E4E1; color:#A63525; }
.demo-message[hidden] { display:none; }
.demo-chargement, .demo-refus { color:var(--dm-douce); padding:24px 0; }


/* ── Les arrivées ──────────────────────────────────────────────────────────
   Le corail est la couleur de l'action dans la charte. Une pièce qui vient
   d'arriver attend un geste : elle porte donc la même couleur que le bouton
   qui la traite. Le filet est fin, l'aplat très clair — la ligne appelle,
   elle ne crie pas. */
.demo-module { --dm-neuf:var(--kanso-corail,#EF7D53); --dm-neuf-fond:#FDF2EC;
               --dm-neuf-encre:#B8532B; }
.demo-bloc.arrivee { background:var(--dm-neuf-fond); }
.demo-bloc.arrivee .n, .demo-bloc.arrivee .l { color:var(--dm-neuf-encre); }
.demo-bloc.arrivee.actif::after { background:var(--dm-neuf); }
.demo-module tbody tr.arrivee { background:var(--dm-neuf-fond);
  box-shadow:inset 3px 0 0 var(--dm-neuf); }
.demo-certitude.propose { color:var(--dm-neuf-encre); font-weight:600;
  max-width:44ch; }

/* D'où vient la pièce. Une micro-étiquette, jamais une pastille de couleur :
   la provenance est un fait, pas une alerte. */
.demo-origine { display:inline-block; margin-left:8px; font-size:10px;
  letter-spacing:.7px; text-transform:uppercase; font-weight:700;
  color:var(--dm-neuf-encre); background:#fff;
  border:1px solid rgba(184,83,43,.28); border-radius:2px; padding:1px 6px; }

/* ── Aller regarder soi-même ───────────────────────────────────────────────
   Le relevé tourne seul ; ce bouton sert à ne pas attendre. Il reste en
   second plan : c'est un raccourci, pas le mode normal de fonctionnement. */
.demo-relever { font-family:Lato,sans-serif; font-size:12.5px; font-weight:700;
  color:var(--dm-navy); background:var(--dm-surface);
  border:1px solid rgba(20,14,89,.24); border-radius:3px; padding:5px 12px;
  cursor:pointer; white-space:nowrap; transition:border-color .12s ease,
  color .12s ease; }
.demo-relever:hover { border-color:var(--kanso-corail,#EF7D53);
  color:var(--kanso-corail,#EF7D53); }
.demo-relever:disabled { opacity:.55; cursor:default; }
.demo-relever:focus-visible { outline:2px solid var(--kanso-corail,#EF7D53);
  outline-offset:1px; }

/* ── Le pied de veille ─────────────────────────────────────────────────────
   Dire que l'écran se met à jour tout seul évite le réflexe de recharger la
   page, et le doute qui va avec : « est-ce que je vois l'état d'il y a une
   heure ? » */
.demo-veille { padding:10px 20px; border-top:1px solid var(--dm-bordure);
  background:#FDFBF9; font-size:12px; color:var(--dm-douce);
  display:flex; align-items:center; gap:8px; }
.demo-veille .pastille { width:6px; height:6px; border-radius:50%;
  background:var(--dm-vert); flex:none; animation:demo-battement 2.6s ease-in-out infinite; }
@keyframes demo-battement { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) {
  .demo-veille .pastille { animation:none; }
}

.demo-message.info { background:#EEF0FA; color:#3B3D8F; }
.demo-module th.col-action, .demo-module td.col-action { width:124px; }


/* Une session finie n'est pas un refus de droit. Le bloc porte donc une issue,
   pas seulement un constat : un message qui laisse la personne sans geste la
   fait recharger la page au hasard. */
.demo-refus { display:flex; flex-direction:column; align-items:flex-start;
  gap:14px; max-width:52ch; }
.demo-refus p { margin:0; }
.demo-refus strong { color:var(--dm-navy); }


/* ── La zone de dépôt ──────────────────────────────────────────────────────
   Elle vit AU-DESSUS du tableau, pas dans un coin : déposer un document est
   le premier geste de la journée, pas une option avancée. Le trait est
   discontinu, la convention universelle du « posez quelque chose ici ». */
.demo-depot { display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:14px 20px; padding:16px 20px;
  border:1.5px dashed var(--dm-bordure); border-radius:4px;
  background:#FDFBF9; transition:border-color .12s ease, background .12s ease; }
.demo-depot-dire { display:flex; flex-direction:column; gap:2px; min-width:0; }
.demo-depot-dire strong { font-family:Lato,sans-serif; font-size:14px;
  color:var(--dm-navy); }
.demo-depot-dire span { font-size:12.5px; color:var(--dm-douce); }
.demo-depot-gestes { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Les commandes sont des <label> : le clic ouvre le sélecteur sans une ligne
   de script, et le clavier y arrive comme sur un bouton. */
.demo-depot-gestes label { cursor:pointer; margin:0; display:inline-block; }
.demo-depot-gestes label:focus-within { outline:2px solid var(--kanso-corail,#EF7D53);
  outline-offset:2px; border-radius:3px; }

/* Survol d'un fichier : la zone se colore, sinon on ne sait pas si le lâcher
   sera pris en compte, et on lâche à côté. */
.demo-depot.survole { border-color:var(--dm-neuf); background:var(--dm-neuf-fond);
  border-style:solid; }
.demo-depot.occupe { opacity:.6; pointer-events:none; }

@media (max-width:640px) {
  .demo-depot { flex-direction:column; align-items:stretch; margin:12px; }
  .demo-depot-gestes { display:grid; grid-template-columns:1fr 1fr; }
  .demo-depot-gestes label { text-align:center; }
  .demo-cadre > header { flex-wrap:wrap; gap:10px; }
  .demo-acces { flex-wrap:wrap; gap:12px; }
}

/* ── Les écarts relevés au croisement ──────────────────────────────────────
   C'est ce que le module rapporte, pas seulement ce qu'il range. Le bloc vit
   donc AU-DESSUS du tableau : personne ne doit descendre dans une liste pour
   trouver ce qui lui coûte de l'argent. */
.demo-ecarts { margin-bottom:24px; }
.demo-enjeu { font-family:Lato,sans-serif; font-weight:900; font-size:15px;
  color:var(--dm-navy); font-variant-numeric:tabular-nums; }
.demo-liste-ecarts { list-style:none; margin:0; padding:0; }
.demo-liste-ecarts .ecart { padding:15px 20px;
  border-bottom:1px solid var(--dm-bordure); }
.demo-liste-ecarts .ecart:last-child { border-bottom:none; }
/* L'ambre dit « quelqu'un doit trancher ». Le vert dit « c'est fait ». Ces
   couleurs ne servent jamais de décor ailleurs. */
.demo-liste-ecarts .ecart.a_arbitrer { background:var(--dm-ambre-fond);
  box-shadow:inset 3px 0 0 var(--dm-ambre); }
.demo-liste-ecarts .ecart.accepte,
.demo-liste-ecarts .ecart.envoye { background:var(--dm-vert-fond);
  box-shadow:inset 3px 0 0 var(--dm-vert); }

.ecart-tete { display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; }
.ecart-piece { font-family:Lato,sans-serif; font-weight:700; font-size:14px;
  color:var(--dm-navy); }
.ecart-genre { margin-left:10px; font-size:11px; letter-spacing:.7px;
  text-transform:uppercase; font-weight:700; color:var(--dm-ambre); }
.ecart-cmd { margin-left:10px; font-size:12.5px; color:var(--dm-douce); }
.ecart-enjeu { font-family:Lato,sans-serif; font-weight:900; font-size:17px;
  color:var(--dm-navy); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ecart-dit { margin:6px 0 0; font-size:13.5px; }
/* La méthode sous le montant : un chiffre sans son calcul ne se défend pas. */
.ecart-base { margin:3px 0 0; font-size:12px; color:var(--dm-douce);
  font-style:italic; }
.ecart-gestes { display:flex; gap:10px; margin-top:11px; flex-wrap:wrap;
  align-items:center; }
.ecart-regle { font-size:12.5px; font-weight:600; color:var(--dm-vert); }

.ecart-courrier { margin-top:13px; border:1px solid var(--dm-bordure);
  border-radius:3px; background:var(--dm-surface); overflow:hidden; }
.courrier-tete { padding:10px 14px; border-bottom:1px solid var(--dm-bordure);
  background:#FDFBF9; font-size:12.5px; display:flex; flex-direction:column; gap:2px; }
.courrier-tete strong { color:var(--dm-navy); }
.courrier-tete span { color:var(--dm-douce); }
.ecart-courrier pre { margin:0; padding:14px; font:inherit; font-size:13px;
  line-height:1.6; white-space:pre-wrap; word-break:break-word; }
/* La phrase qui désamorce la seule vraie inquiétude d'un dirigeant : « ça va
   écrire à mes fournisseurs tout seul ? ». Elle est dans le cadre, pas en
   note de bas de page. */
.courrier-note { margin:0; padding:11px 14px; border-top:1px solid var(--dm-bordure);
  background:#EEF0FA; color:#3B3D8F; font-size:12.5px; }
.ecart-courrier .ecart-gestes { margin:0; padding:12px 14px;
  border-top:1px solid var(--dm-bordure); }

@media (max-width:640px) {
  .ecart-tete { flex-direction:column; gap:4px; }
  .ecart-genre, .ecart-cmd { margin-left:0; display:block; }
}

/* ── Le nom proposé ─────────────────────────────────────────────────────────
   Sous le nom actuel, en plus discret : c'est une proposition, pas un fait. */
.demo-renom { display:flex; align-items:baseline; gap:9px; margin-top:4px;
  flex-wrap:wrap; }
.demo-renom-nom { font-size:12px; color:var(--dm-navy); font-family:"SF Mono",
  Menlo, monospace; background:var(--dm-surface); border:1px dashed
  rgba(20,14,89,.3); border-radius:2px; padding:2px 7px; word-break:break-all; }
.demo-renommer { font:inherit; font-size:11.5px; font-weight:700; color:var(--dm-navy);
  background:none; border:none; border-bottom:1px solid rgba(20,14,89,.35);
  padding:0; cursor:pointer; }
.demo-renommer:hover { color:var(--kanso-corail,#EF7D53);
  border-bottom-color:var(--kanso-corail,#EF7D53); }

/* ── L'écart au registre ──────────────────────────────────────────────────── */
.demo-registre-ecart { margin:12px 20px 0; padding:12px 15px;
  background:var(--dm-ambre-fond); border-radius:3px;
  box-shadow:inset 3px 0 0 var(--dm-ambre); font-size:13px; line-height:1.5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; }
.demo-registre-ecart strong { color:var(--dm-ambre); }