:root {
  --fond: #12100e;
  --carte: #1b1815;
  --carte2: #221f1b;
  --bord: #2e2a25;
  --or: #d9a441;
  --or-pale: #e8bb6a;
  --vert: #6fa87c;
  --rouge: #c4705f;
  --bleu: #5f8fc4;
  --texte: #e8e0d4;
  --texte-doux: #a09080;
  --texte-tres-doux: #6a5e52;
  --rayon: 12px;
  --rayon-sm: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
body { background: var(--fond); color: var(--texte); font: 15px/1.5 system-ui, -apple-system, sans-serif; min-height: 100vh }
button { font: inherit }
a { color: var(--bleu); text-decoration: none }
a:hover { color: var(--or-pale); text-decoration: underline }

/* ---- Login ---- */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
}
.login-card {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 40px;
  width: 100%; max-width: 360px;
}
.login-title { font-size: 22px; font-weight: 700; color: var(--or); margin-bottom: 6px }
.login-sub { color: var(--texte-doux); font-size: 13px; margin-bottom: 28px }
.login-input {
  width: 100%; background: var(--carte2); border: 1px solid var(--bord);
  border-radius: var(--rayon-sm); color: var(--texte); font-size: 16px;
  padding: 12px 16px; outline: none; letter-spacing: 3px;
  transition: border-color .15s;
}
.login-input:focus { border-color: var(--or) }
.login-btn {
  margin-top: 14px; width: 100%; background: var(--or); border: none;
  border-radius: var(--rayon-sm); color: #12100e; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 12px;
  transition: background .15s;
}
.login-btn:hover { background: var(--or-pale) }
.login-err { color: var(--rouge); font-size: 13px; margin-top: 10px; min-height: 20px }

/* ---- Layout ---- */
.app { display: flex; min-height: 100vh }

.sidebar {
  background: var(--carte); border-right: 1px solid var(--bord);
  display: flex; flex-direction: column;
  width: 210px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.sidebar-logo {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--bord);
}
.sidebar-logo-title { font-size: 13px; font-weight: 700; color: var(--or); letter-spacing: .5px }
.sidebar-logo-sub { font-size: 11px; color: var(--texte-tres-doux); margin-top: 2px }
.version-depot { font-size: 11px; color: var(--texte-tres-doux); margin-top: 6px }
.version-depot:empty { display: none }
.version-depot.version-depot-retard { color: #e35d5d; font-weight: 600 }

.nav { padding: 8px 0; flex: 1; overflow-y: auto }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; cursor: pointer;
  color: var(--texte-doux); font-size: 14px;
  transition: color .15s, background .15s;
  border-left: 2px solid transparent; user-select: none;
}
.nav-item:hover { color: var(--texte); background: rgba(255,255,255,.02) }
.nav-item.active { color: var(--texte); background: var(--carte2); border-left-color: var(--or) }
.nav-item svg { flex-shrink: 0; opacity: .7 }
.nav-item.active svg { opacity: 1 }

.sidebar-bottom {
  padding: 12px 20px; border-top: 1px solid var(--bord);
  font-size: 12px; color: var(--texte-tres-doux);
}
.logout-btn {
  background: none; border: none; color: var(--texte-tres-doux);
  cursor: pointer; font-size: 13px; padding: 0;
  transition: color .15s;
}
.logout-btn:hover { color: var(--rouge) }

.main { flex: 1; padding: 28px; overflow: auto; min-width: 0 }

/* ---- La barre d'onglets du téléphone ----
   Sous 768 px la `.sidebar` disparaît, et avec elle tout chemin vers les autres onglets.
   On ne la rend pas visible pour autant : elle mange 210 px de largeur, celle-là
   même que le panneau de lecture vient de gagner. Une barre EN BAS, à portée de
   pouce, cibles de 52 px — les deux règles d'interface du projet.
   Elle passe SOUS les panneaux (z-index 150 contre 200 et 300) : le ticket lu
   reste collé au bas de l'écran, il ne monte pas pour lui laisser la place. */
.tabbar { display: none }
.tabbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 52px; padding: 6px 4px;
  background: none; border: none; border-top: 2px solid transparent;
  color: var(--texte-doux); font: inherit; font-size: 11px; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.tabbar-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.tabbar-item svg { flex-shrink: 0; opacity: .7 }
.tabbar-item.active { color: var(--or); border-top-color: var(--or) }
.tabbar-item.active svg { opacity: 1 }

/* ---- Pages ---- */
.page { display: none }
.page.active { display: block }
.page-title {
  font-size: 20px; font-weight: 700; color: var(--texte);
  margin-bottom: 20px; display: flex; align-items: baseline; gap: 10px;
}
.page-count { font-size: 14px; font-weight: 400; color: var(--texte-tres-doux) }

/* ---- Stats grid ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.stat-card {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px;
}
.stat-label {
  color: var(--texte-doux); font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.stat-value { font-size: 30px; font-weight: 700; line-height: 1 }
.stat-value.or { color: var(--or) }
.stat-value.vert { color: var(--vert) }
.stat-value.rouge { color: var(--rouge) }
.stat-value.bleu { color: var(--bleu) }
.stat-sub { color: var(--texte-tres-doux); font-size: 12px; margin-top: 6px }

/* ---- Sections / tables ---- */
.section {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; margin-bottom: 16px;
}
.section-header {
  padding: 14px 18px; border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: space-between;
}
.section-title { font-size: 14px; font-weight: 600; color: var(--texte) }

.table { width: 100%; border-collapse: collapse }
.table th {
  color: var(--texte-doux); font-size: 11px; font-weight: 600;
  text-align: left; padding: 10px 14px;
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid var(--bord);
}
.table td {
  padding: 10px 14px; border-bottom: 1px solid var(--bord);
  font-size: 13px; vertical-align: middle;
}
.table tr:last-child td { border-bottom: none }
.table tbody tr:hover td { background: rgba(255,255,255,.015) }
.table .clickable-row { cursor: pointer }
.table .clickable-row:hover td { background: rgba(217,164,65,.05) }

/* Nested lot rows */
.lot-row td {
  background: var(--carte2) !important;
  padding: 8px 14px 8px 32px;
  border-bottom: 1px solid rgba(46,42,37,.5);
  font-size: 12px;
}
.lot-row:last-child td { border-bottom: none }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center;
  border-radius: 20px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; white-space: nowrap;
}
.badge-vert  { background: rgba(111,168,124,.15); color: var(--vert) }
.badge-rouge { background: rgba(196,112,95,.15);  color: var(--rouge) }
.badge-or    { background: rgba(217,164,65,.15);  color: var(--or) }
.badge-bleu  { background: rgba(95,143,196,.15);  color: var(--bleu) }
.badge-grey  { background: rgba(160,144,128,.1);  color: var(--texte-doux) }

/* ---- Filters ---- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px }
.filter-select {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon-sm); color: var(--texte);
  font-size: 13px; padding: 7px 10px; cursor: pointer; outline: none;
  transition: border-color .15s;
}
.filter-select:focus { border-color: var(--or) }

/* ---- Log modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.modal {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); max-height: 80vh;
  overflow: hidden; display: flex; flex-direction: column;
  width: 100%; max-width: 900px;
}
.modal-header {
  padding: 14px 18px; border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-filename { font-family: monospace; font-size: 12px; color: var(--texte-doux) }
.modal-close {
  background: none; border: none; color: var(--texte-doux);
  cursor: pointer; font-size: 22px; line-height: 1; padding: 0 2px;
  transition: color .15s;
}
.modal-close:hover { color: var(--rouge) }
.modal-body {
  overflow: auto; padding: 18px;
  font-family: monospace; font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; color: var(--texte-doux);
}

/* ---- Chart ---- */
.chart-wrap { padding: 16px 18px }
.chart-legend { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-doux) }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0 }

/* ---- Two-column grid ---- */
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }

/* ---- Empty / loading ---- */
.empty { padding: 36px; text-align: center; color: var(--texte-tres-doux); font-size: 13px }
.loading { padding: 40px; text-align: center; color: var(--texte-tres-doux); font-size: 13px }

/* ---- Truncated cell ---- */
.cell-trunc {
  max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Log button ---- */
.log-btn {
  background: none; border: 1px solid var(--bord);
  border-radius: 4px; color: var(--texte-doux); cursor: pointer;
  font-size: 11px; padding: 2px 7px;
  transition: border-color .15s, color .15s;
}
.log-btn:hover { border-color: var(--or); color: var(--or) }

/* ── L'équipe ──────────────────────────────────────────────────────────────
   La mise en page validée par Laurent : une étiquette de rangée à gauche, les
   cartes centrées à droite, un trait entre les rangées. Les couleurs sont
   celles de l'admin, pas celles du PNG : la page est lue sur fond sombre.
   EN PORTRAIT, LA RANGÉE PASSE EN COLONNE : à 390 px, deux cartes côte à côte
   font 170 px chacune et la phrase de description devient illisible. */
.eq-legende { display: flex; gap: 18px; flex-wrap: wrap; color: var(--texte-doux); font-size: 12px; margin-bottom: 18px }
.eq-legende span { display: flex; align-items: center; gap: 7px }
.eq-pastille { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--texte-tres-doux) }
.eq-vert { background: var(--vert) }
.eq-or { background: var(--or) }
.eq-rouge { background: var(--rouge) }
.eq-gris { background: var(--texte-tres-doux) }
.eq-humain { background: none }

.eq-organigramme { display: flex; flex-direction: column; gap: 4px }
.eq-rang { display: grid; grid-template-columns: 148px 1fr; align-items: center; gap: 14px }
.eq-rang + .eq-rang { border-top: 1px solid var(--bord); padding-top: 18px; margin-top: 14px }
.eq-etiq {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--texte-tres-doux); font-weight: 600;
}
.eq-cartes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }
.eq-cartes-libres { justify-content: flex-start }

.eq-carte {
  position: relative; display: block; text-align: left;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 13px 16px 12px; width: 272px; color: var(--texte);
  transition: border-color .15s, background .15s;
}
a.eq-carte:hover { border-color: var(--or); background: var(--carte2); text-decoration: none; color: var(--texte) }
.eq-carte.eq-avenir { background: none; border-style: dashed }
.eq-carte.eq-humain { background: none; border-color: var(--texte-tres-doux) }
.eq-statut {
  position: absolute; top: 13px; right: 14px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--texte-doux);
}
.eq-nom { font-size: 17px; font-weight: 700; color: var(--texte); padding-right: 72px }
.eq-role {
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--or); font-weight: 700; margin-top: 3px;
}
.eq-quoi { font-size: 13px; color: var(--texte-doux); margin-top: 7px; line-height: 1.4 }
.eq-direct {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bord);
  font-size: 12px;
}
.eq-direct-mot { color: var(--texte) }
.eq-direct-detail { color: var(--texte-tres-doux) }
.eq-alerte { margin-top: 6px; font-size: 12px; color: var(--rouge) }
.eq-modele {
  margin-top: 6px; font-size: 12px; font-family: var(--police-code, monospace);
}
.eq-modele-actif { color: var(--vert) }
.eq-modele-repos { color: var(--texte-tres-doux) }

/* Le nombre de tickets qui restent, gros et sans clic (ticket rang 3, 18/09/2026) */
.eq-file-grosse { font-size: 26px; font-weight: 800; line-height: 1; color: var(--texte); margin-bottom: 2px }

/* PAS DE FILE N'EST PAS UNE FILE VIDE (ticket du 18/09/2026, Régis pro et
   Benoît) : la phrase prend la place du chiffre, en gris et sans pastille —
   rien ici ne doit se lire comme une alerte. */
.eq-sans-file { margin-top: 6px; font-size: 12px; color: var(--texte-tres-doux); line-height: 1.45 }
.eq-ouverts { margin-top: 6px; font-size: 12px; color: var(--texte-doux) }
.eq-ouverts b { font-size: 15px; color: var(--texte) }
.eq-ouverts-detail { color: var(--texte-tres-doux) }
.eq-direct-sans-voie .eq-direct-mot { color: var(--texte-tres-doux); font-style: italic }
.eq-direct-pourquoi { margin-top: 4px; font-size: 11.5px; color: var(--texte-tres-doux); line-height: 1.45 }

/* Le compte, pas le modèle (ticket rang 3, 18/09/2026) : qui paye, même au repos. */
.eq-compte {
  margin-top: 6px; font-size: 12px; font-family: var(--police-code, monospace);
}
.eq-compte-mot { color: var(--texte-doux); font-weight: 600 }
.eq-compte-actif .eq-compte-mot { color: var(--vert) }
.eq-compte-detail { color: var(--texte-tres-doux); margin-left: 6px }
.eq-compte-divergent .eq-compte-mot { color: var(--rouge) }

.eq-note { min-height: 0; font-size: 13px; color: var(--or); margin-bottom: 12px }
.eq-note-visible { min-height: 20px }
.eq-problemes {
  border: 1px solid var(--rouge); border-radius: var(--rayon-sm);
  padding: 10px 14px; margin-bottom: 16px; color: var(--rouge); font-size: 13px;
}
.eq-compteurs { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 18px; font-size: 13px; color: var(--texte-doux) }
.eq-compteur b { color: var(--texte) }
.eq-notes { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; padding: 16px 18px; font-size: 13px; color: var(--texte-doux) }
.eq-note-bloc b { color: var(--texte); display: block; margin-bottom: 4px }

/* ---- La page d'un agent ----
   Demande de Laurent du 11 septembre 2026 : « pour chacun des workers il
   faudrait une page qui justement montre son travail ». Quatre blocs dans
   l'ordre des questions : maintenant, sa file, ce qu'il a fini, est-ce que ça
   baisse. Des LIGNES et pas des cartes : une file de soixante-dix tickets en
   cartes de 272 px demanderait quatre écrans de défilement pour se compter. */
.ag-retour { margin-bottom: 10px; font-size: 13px }
.ag-lien { color: var(--or); cursor: pointer }
.ag-lien:hover { color: var(--or-pale); text-decoration: underline }
/* Le sous-titre d'une section : d'où vient le chiffre. Il est à droite du titre
   en paysage, sous lui en portrait — jamais tronqué, parce que c'est lui qui
   dit ce qu'on regarde. */
.section-sub { font-size: 12px; color: var(--texte-doux); text-align: right; max-width: 62% }
.section-sub b { color: var(--texte) }

.ag-direct {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 13px 18px; font-size: 13px;
}
.ag-direct-mot { color: var(--texte); font-weight: 600 }
.ag-direct + .eq-alerte, .ag-direct + .eq-problemes { margin: 0 18px 12px }

.ag-en-cours, .ag-file-ligne, .ag-fini-ligne {
  padding: 10px 18px; border-top: 1px solid var(--bord); font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
[data-ouvrir].ag-en-cours, [data-ouvrir].ag-file-ligne, [data-ouvrir].ag-fini-ligne { cursor: pointer }
[data-ouvrir].ag-en-cours:hover, [data-ouvrir].ag-file-ligne:hover, [data-ouvrir].ag-fini-ligne:hover {
  background: rgba(217,164,65,.05);
}
.ag-en-cours { display: block; border-left: 3px solid var(--or) }
.ag-en-cours-titre { font-size: 14px; font-weight: 600; color: var(--texte) }
/* Un ticket qui attend son heure (`pas_avant` dans l'en-tête, ticket 378) :
   en retrait, une date illisible s'affiche en rouge et le ticket part quand
   même. */
.ag-file-differe { opacity: .62 }
.ag-introuvable { opacity: .6 }
.ag-rang {
  min-width: 34px; text-align: right; color: var(--or);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.ag-heure { color: var(--texte-doux); font-variant-numeric: tabular-nums; min-width: 42px }
.ag-file-titre, .ag-fini-titre { flex: 1 1 220px; color: var(--texte) }
.ag-ligne-meta { flex: 0 1 auto; color: var(--texte-tres-doux); font-size: 11.5px }
.ag-ligne-meta code { font-size: 11px }
.ag-rien { padding: 14px 18px; color: var(--texte-doux); font-size: 13px }
.ag-note { padding: 10px 18px; color: var(--texte-tres-doux); font-size: 12px }
.ag-plus { border-top: 1px solid var(--bord) }
.ag-plus > summary { padding: 11px 18px; cursor: pointer; color: var(--texte-doux); font-size: 13px }
.ag-plus > summary:hover { color: var(--or) }
.ag-interrompus {
  border-top: 1px solid var(--bord); padding: 12px 18px;
  font-size: 12px; color: var(--texte-doux);
}
.ag-interrompus b { color: var(--or) }

/* L'histogramme : deux barres par heure, LA MÊME ÉCHELLE pour les deux. Deux
   échelles feraient lire un rattrapage là où il y a un retard. */
.ag-flux { display: flex; align-items: flex-end; gap: 3px; padding: 16px 18px 8px; height: 132px }
.ag-flux-heure { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; height: 100% }
.ag-flux-barres {
  flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  border-bottom: 1px solid var(--bord);
}
.ag-barre { width: 6px; min-height: 1px; border-radius: 2px 2px 0 0; display: block }
.ag-barre-entree { background: var(--bleu) }
.ag-barre-sortie { background: var(--vert) }
.ag-flux-etiq {
  text-align: center; font-size: 10px; color: var(--texte-tres-doux);
  padding-top: 4px; font-variant-numeric: tabular-nums;
}
.ag-flux-legende {
  display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 4px 18px 12px;
  font-size: 12px; color: var(--texte-doux);
}
.ag-flux-legende span { display: flex; align-items: center; gap: 7px }
.ag-pastille-carree { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0 }

/* Le jour en cours (ticket rang 6, 18/09/2026) : hachuré plutôt que plein, sinon
   une matinée incomplète se lit comme un effondrement de la veille. */
.ag-barre-en-cours {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 5px);
}

/* Le bouton « 48 heures / 30 jours » de la page Équipe (ticket rang 6) : même
   graphe, deux focales, basculées côté client sans nouvel appel réseau. */
.eq-flux-boutons { display: flex; gap: 6px }
.eq-flux-btn {
  font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--bord); background: var(--fond); color: var(--texte-doux);
  cursor: pointer;
}
.eq-flux-btn.actif { background: var(--bleu); border-color: var(--bleu); color: #fff }

.ag-passe { padding: 13px 18px; border-top: 1px solid var(--bord) }
.ag-passe-titre { font-size: 14px; font-weight: 600; color: var(--texte) }
.ag-passe-resume { font-size: 13px; color: var(--texte-doux); margin-top: 6px }
.ag-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.ag-puce {
  border: 1px solid var(--bord); border-radius: 20px; padding: 2px 10px;
  font-size: 11px; color: var(--texte-doux);
}
.ag-runner-ligne {
  display: flex; gap: 12px; align-items: baseline;
  padding: 7px 18px; border-top: 1px solid var(--bord); font-size: 12.5px;
}
.ag-journal { padding: 12px 18px; font-size: 12.5px; color: var(--texte-doux) }
.ag-journal div { padding: 3px 0; border-bottom: 1px solid rgba(46,42,37,.5) }
.ag-journal div:last-child { border-bottom: none }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .col2 { grid-template-columns: 1fr }
  .eq-notes { grid-template-columns: 1fr }
}
@media (max-width: 768px) {
  .sidebar { display: none }
  /* `padding-bottom` laisse passer la barre d'onglets : sans lui, le dernier
     bloc de chaque page finit dessous et ne se lit jamais en entier. */
  .main { padding: 16px 16px calc(58px + env(safe-area-inset-bottom, 0px)) }
  .stats-grid { grid-template-columns: repeat(2, 1fr) }
  /* L'organigramme en portrait : l'étiquette de rangée au-dessus, une carte par
     ligne, pleine largeur. La cible d'une carte-lien fait alors toute la largeur
     de l'écran, et la description se lit. */
  .eq-rang { grid-template-columns: 1fr; gap: 8px }
  .eq-cartes { justify-content: stretch }
  .eq-carte { width: 100%; min-height: 44px }
  /* La page d'un agent en portrait : l'en-tête de section passe en colonne
     (sinon le sous-titre, qui dit d'où vient le chiffre, se réduit à deux mots
     par ligne), et les vingt-quatre heures se resserrent sans disparaître. */
  #page-agent .section-header { flex-direction: column; align-items: flex-start; gap: 4px }
  .section-sub { text-align: left; max-width: 100% }
  .ag-flux { gap: 2px; padding: 14px 12px 6px }
  .ag-barre { width: 4px }
  .ag-flux-etiq { font-size: 9px }
  .ag-en-cours, .ag-file-ligne, .ag-fini-ligne { min-height: 44px }
  .tabbar {
    /* Les colonnes se comptent toutes seules : `repeat(4, 1fr)` obligeait à
       retoucher la feuille à chaque onglet ajouté, et l'oubli fait déborder le
       dernier hors de l'écran. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--carte); border-top: 1px solid var(--bord);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Tuiles de commission ─────────────────────────────────────────────── */
/* Trois chiffres cote a cote, qui restent lisibles quand la courbe n'a pas
   encore assez de points. Sur telephone ils passent en colonne. */
.chart-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.chart-tuile {
  background: var(--carte2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-sm, 8px);
  padding: 12px 16px;
}
.chart-tuile-val {
  font-family: ui-monospace, 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--texte);
}
.chart-tuile-lib {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--texte-doux);
  line-height: 1.4;
}
.chart-tuile-lib span { color: var(--texte-tres-doux); }
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 0.75rem;
  color: var(--texte-doux);
}
.chart-legend-item i {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Tri des colonnes */
th.tri { user-select: none; }
th.tri:hover { color: var(--or); }
.tri-fleche { opacity: .35; font-size: 11px; }
.tri-fleche.actif { opacity: 1; color: var(--or); }


/* La vignette d'un objet dans le tableau. Taille fixe : une colonne d'images
   de hauteurs differentes rend le tableau illisible. `object-fit: cover` cadre
   au centre plutot que de deformer. */
.objets-vignette {
  width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
  display: block; background: var(--carte2); border: 1px solid var(--bord);
}
.objets-vignette--vide { opacity: .35 }

/* ---- Objets jamais partis ----
   Un echec de publication doit se voir sans qu'on le cherche : c'est la seule
   section de l'admin qui porte une bordure coloree, parce qu'elle ne devrait
   presque jamais avoir quelque chose a dire. Si elle devient banale a l'oeil,
   elle a echoue. */
.section-alerte {
  border-color: var(--rouge);
  box-shadow: 0 0 0 1px rgba(196,112,95,.12);
}
.section-alerte .section-title { color: var(--rouge) }
/* Le motif d'echec est long (il finit souvent par un chemin de log) : on en
   montre assez pour reconnaitre la cause, le reste est dans l'infobulle. */
.endormis-motif {
  color: var(--texte-doux); font-size: 12px;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La question posee sous le motif : « dans quelle categorie ? », et un bouton
   par libelle que leboncoin proposait ce jour-la. Elle ne s'affiche que quand
   il y a vraiment une question, et elle disparait des qu'on y a repondu. */
.categorie-question {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px;
}
.categorie-question-libelle { font-size: 12px; color: var(--texte-doux) }
.btn-categorie {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 8px 12px; border-radius: var(--rayon-sm);
  border: 1px solid var(--bord); background: var(--carte2); color: var(--texte);
}
.btn-categorie:hover:not(:disabled) { border-color: var(--bleu); color: var(--bleu) }
.btn-categorie:disabled { opacity: .5; cursor: default }
/* Un refus ne chuchote pas : c'est toute la discipline du projet. */
.categorie-erreur { font-size: 12px; color: var(--rouge) }
.categorie-ok { font-size: 12px; color: var(--vert) }

.quai-sous { color: var(--texte-doux); font-size: 13px; margin: -8px 0 18px; max-width: 62ch }

/* ---- Le ticket en entier ----
   Un panneau qui se referme, pas une nouvelle page. Sur téléphone il prend
   toute la largeur et vient du bas, là où est le pouce. */
body.sans-defilement { overflow: hidden }
.ticket-panneau {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; padding: 20px;
}
.ticket-feuille {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); max-height: 86vh;
  width: 100%; max-width: 820px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ticket-tete {
  display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
  padding: 14px 18px; border-bottom: 1px solid var(--bord); background: var(--carte2);
}
.ticket-tete-texte { min-width: 0; flex: 1 }
.ticket-titre { font-size: 16px; font-weight: 700; color: var(--texte); line-height: 1.3 }
.ticket-meta {
  font-size: 11.5px; color: var(--texte-tres-doux); margin-top: 4px;
  font-family: ui-monospace, 'Courier New', monospace; word-break: break-word;
}
.ticket-fermer {
  flex: 0 0 auto; min-width: 40px; min-height: 40px;
  background: none; border: none; color: var(--texte-doux);
  cursor: pointer; font-size: 26px; line-height: 1;
}
.ticket-fermer:hover { color: var(--rouge) }
.ticket-corps {
  overflow: auto; padding: 18px 22px 28px;
  font-size: 14.5px; line-height: 1.62; color: var(--texte-doux);
  overscroll-behavior: contain;
}

/* Le Markdown rendu. Rien ici n'est décoratif : ce sont les formes que nos
   tickets emploient vraiment — titres, citations, tableaux, blocs de code. */
.ticket-corps h1, .ticket-corps h2, .ticket-corps h3,
.ticket-corps h4, .ticket-corps h5, .ticket-corps h6 {
  color: var(--texte); line-height: 1.3; margin: 22px 0 8px;
}
.ticket-corps h1 { font-size: 19px; color: var(--or) }
.ticket-corps h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--bord); padding-bottom: 5px;
}
.ticket-corps h3 { font-size: 14.5px; color: var(--or-pale) }
.ticket-corps h4, .ticket-corps h5, .ticket-corps h6 { font-size: 14px }
.ticket-corps > :first-child { margin-top: 0 }
.ticket-corps p { margin: 0 0 12px }
.ticket-corps b, .ticket-corps strong { color: var(--texte); font-weight: 700 }
.ticket-corps ul, .ticket-corps ol { margin: 0 0 12px; padding-left: 22px }
.ticket-corps li { margin-bottom: 5px }
.ticket-corps li > ul, .ticket-corps li > ol { margin: 5px 0 0 }
.ticket-corps blockquote {
  border-left: 3px solid var(--or); background: rgba(217,164,65,.06);
  padding: 8px 14px; margin: 0 0 12px; border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  color: var(--texte);
}
.ticket-corps blockquote p:last-child { margin-bottom: 0 }
.ticket-corps code {
  font-family: ui-monospace, 'Courier New', monospace; font-size: 12.5px;
  background: var(--carte2); border: 1px solid var(--bord);
  border-radius: 4px; padding: 1px 5px; color: var(--or-pale);
  overflow-wrap: anywhere;
}
/* LE BLOC DE CODE GARDE SES RETOURS À LA LIGNE ET DÉFILE, il ne déborde pas :
   une commande repliée n'est plus la commande. */
.ticket-corps pre {
  background: var(--carte2); border: 1px solid var(--bord);
  border-radius: var(--rayon-sm); padding: 12px 14px; margin: 0 0 12px;
  overflow-x: auto; max-width: 100%;
}
.ticket-corps pre code {
  background: none; border: none; padding: 0; color: var(--texte-doux);
  white-space: pre; display: block; overflow-wrap: normal;
}
.ticket-corps table {
  border-collapse: collapse; width: 100%; margin: 0 0 12px;
  font-size: 13px; display: block; overflow-x: auto;
}
.ticket-corps th, .ticket-corps td {
  border: 1px solid var(--bord); padding: 6px 9px; text-align: left; vertical-align: top;
}
.ticket-corps th { background: var(--carte2); color: var(--texte); font-weight: 600 }
.ticket-corps hr { border: none; border-top: 1px solid var(--bord); margin: 18px 0 }

/* C'est là que Laurent lit le plus souvent : toute la largeur, le texte à sa
   taille, et le panneau posé en bas de l'écran. */
@media (max-width: 768px) {
  .ticket-panneau { padding: 0; align-items: flex-end }
  .ticket-feuille { max-height: 92vh; border-radius: var(--rayon) var(--rayon) 0 0; border-bottom: none }
  .ticket-corps { font-size: 15px; padding: 16px 16px 32px }
  .ticket-tete { padding: 12px 14px }
}

.quai-introuvable {
  font-size: 12px; color: var(--rouge); padding: 10px 12px;
  border: 1px dashed var(--rouge); border-radius: var(--rayon-sm);
  display: flex; flex-direction: column; gap: 3px;
}
.quai-introuvable span { font-family: monospace; font-size: 10.5px; color: var(--texte-tres-doux); word-break: break-all }

/* ---- Doublons présumés (ticket 142) ----
   L'écran d'un doute, pas d'un verdict : les photos d'abord, en grand assez
   pour comparer, et un seul bouton par objet. Rien n'archive un groupe. */
.doublon-groupe {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--carte); margin-bottom: 16px; overflow: hidden;
}
.doublon-groupe-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--carte2); border-bottom: 1px solid var(--bord);
}
.doublon-groupe-certitude { font-size: 12px; font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: .06em }
.doublon-groupe-compte { font-size: 12px; color: var(--texte-doux) }
.doublon-groupe-lots { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px }
.doublon-lot { flex: 1 1 320px; min-width: 0; border: 1px solid var(--bord); border-radius: var(--rayon-sm); padding: 12px }
.doublon-lot-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px }
.doublon-lot-titre { font-size: 14px; font-weight: 600 }
.doublon-lot-sous { font-size: 12px; color: var(--texte-doux); margin-top: 4px }
.doublon-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; background: var(--carte2); color: var(--texte-doux); border: 1px solid var(--bord);
}
.doublon-badge-ligne { color: var(--vert); border-color: var(--vert) }
.doublon-vignettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.doublon-vignette { width: 72px; height: 72px; object-fit: cover; border-radius: var(--rayon-sm); border: 1px solid var(--bord) }
.doublon-lot-actions { margin-top: 12px }
.btn-petit {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 8px 12px; border-radius: var(--rayon-sm);
  border: 1px solid var(--bord); background: var(--carte2); color: var(--texte);
}
.btn-petit:hover:not(:disabled) { border-color: var(--or); color: var(--or) }
.btn-petit:disabled { opacity: .5; cursor: default }
.doublon-vide { font-size: 13px; color: var(--texte-doux); padding: 12px 2px }
/* « Je ne sais pas » ne se lit pas comme « il n'y a rien » : la colonne muette
   se distingue de la colonne vide. */
.doublon-vide-alerte { color: var(--rouge); border-left: 3px solid var(--rouge); padding-left: 10px }

/* ── À décider et moyen terme ─────────────────────────────────────────────── */
/* Demande de Laurent du 11/09/2026 : « de façon assez centralisée au même
   endroit et qu'on le voie bien ». Cinq listes en lecture seule, et un encart
   sur l'accueil qui y mène. Rien ici ne ressemble a un bouton d'action : le
   seul geste possible est d'ouvrir un ticket, les décisions restent humaines. */

.dec-encart {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--carte); border: 1px solid var(--or);
  border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 18px;
  transition: border-color .15s, background .15s;
}
.dec-encart:hover, .dec-encart:focus-visible { background: var(--carte2); border-color: var(--or-pale) }
/* Rien en attente : l'encart reste, mais il cesse de tirer l'oeil. Le faire
   disparaitre apprendrait a ne plus le chercher. */
.dec-encart-calme { border-color: var(--bord) }
.dec-encart-muet { border-color: var(--rouge) }
.dec-encart-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.dec-encart-chiffre { font-size: 26px; font-weight: 700; color: var(--or) }
.dec-encart-calme .dec-encart-chiffre { color: var(--texte-doux) }
.dec-encart-titre { font-size: 15px; font-weight: 600 }
.dec-encart-detail { font-size: 13px; color: var(--texte-doux); margin-top: 4px }

/* CE QUI EST ENLISE (ticket rang 6 du 18/09/2026). Meme encart que « A
   decider », un seul token de difference : le fond teinte d'alerte de
   DESIGN.md (#1e1a0e). Ce n'est pas un echec — ces entrees-la n'ont jamais
   echoue, elles n'ont simplement plus bouge — donc ni rouge ni bandeau
   d'urgence : l'or de l'attention, pas celui de l'alarme. */
.dec-encart-enlise { border-color: var(--or); background: #1e1a0e }
.dec-encart-enlise:hover, .dec-encart-enlise:focus-visible { background: #241f10 }

/* L'age et le nombre de tentatives se comparent d'une ligne a l'autre : ils
   sont donc en chiffres tabulaires, comme tout nombre comparable du projet. */
.enl-age {
  text-align: right; white-space: nowrap;
  font-family: ui-monospace, 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
}
.enl-chapo { font-size: 13px; color: var(--texte-doux); padding: 0 0 12px }

/* A QUI APPARTIENT LE GESTE, sous l'etat de chaque ligne. La page est en
   lecture seule : sans cette phrase, elle montre des blocages sans dire lequel
   appartient a quelle file, et le lecteur reste sans issue. Petit et doux, la
   ligne se lit sans concurrencer l'etat qu'elle explique. */
.enl-a-qui {
  font-size: 11px; line-height: 1.35; color: var(--texte-doux);
  margin-top: 4px; max-width: 32ch;
}

/* Le repli des entrees dont l'objet est deja range : repliees, jamais retirees
   (regle 4 de lib/enlisees.mjs). Mesure du 22/09/2026 : 11 des 35, soit 46 %
   d'un compteur dont rien ne partira puisque l'objet n'est plus a vendre. La
   poignee tient le plancher tactile de 40 px, comme .ac-repli. */
.enl-repli { border-top: 1px solid var(--bord) }
.enl-repli > summary {
  font-size: 12px; color: var(--texte-doux); padding: 12px 14px;
  min-height: 40px; cursor: pointer; list-style-position: inside;
}
.enl-repli > summary:hover { color: var(--texte) }
.enl-repli[open] > summary { border-bottom: 1px solid var(--bord) }

.dec-section { margin-bottom: 18px }
.dec-section .section-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.dec-compte {
  display: inline-block; min-width: 26px; text-align: center;
  font-weight: 700; color: var(--or); background: var(--carte2);
  border: 1px solid var(--bord); border-radius: 999px; padding: 0 8px; margin-right: 4px;
}
.dec-compte-illisible { color: var(--rouge); border-color: var(--rouge) }
.dec-sous { font-size: 12px; color: var(--texte-tres-doux) }

.dec-liste { list-style: none; margin: 0; padding: 0 }
.dec-ligne { border-top: 1px solid var(--bord); padding: 10px 14px }
.dec-ligne:first-child { border-top: none }
.dec-ouvrable { cursor: pointer }
.dec-ouvrable:hover, .dec-ouvrable:focus-visible { background: var(--carte2) }
.dec-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.dec-num { font-size: 11px; font-weight: 700; color: var(--or); letter-spacing: .04em }
.dec-titre { font-size: 14px; font-weight: 600; min-width: 0 }
.dec-file {
  font-size: 11px; color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: 999px; padding: 1px 8px;
}
.dec-detail { display: block; font-size: 13px; color: var(--texte-doux); margin-top: 4px }
/* Ce qui n'est pas écrit se dit, il ne se laisse pas en blanc. */
.dec-manque { color: var(--rouge) }
.dec-date { display: block; font-size: 12px; color: var(--texte-tres-doux); margin-top: 3px }
/* Les familles de « Ce qui attend Laurent » (ticket 147). Vingt-neuf lignes à
   la suite ne se lisent pas en dix secondes : chaque famille porte son compte
   sur son résumé, donc repliée elle dit encore combien elle cache. */
.dec-groupe { border-top: 1px solid var(--bord) }
.dec-groupe:first-of-type { border-top: none }
.dec-groupe-tete {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; cursor: pointer;
}
.dec-groupe-tete:hover { background: var(--carte2) }
.dec-groupe-titre { font-size: 13px; font-weight: 600; color: var(--texte-doux) }
.dec-groupe[open] > .dec-groupe-tete .dec-groupe-titre { color: var(--texte) }
.dec-groupe > .dec-liste { border-top: 1px solid var(--bord) }
/* Le reste de la famille, au-delà du paquet montré d'emblée. */
.dec-reste > summary {
  padding: 9px 14px; cursor: pointer; font-size: 12px; color: var(--texte-doux);
  border-top: 1px solid var(--bord);
}
.dec-reste > summary:hover { color: var(--or) }
.dec-vide { font-size: 13px; color: var(--texte-doux); padding: 12px 14px }
.dec-partiel { font-size: 12px; padding: 0 14px 10px }
.dec-chemin { font-size: 11px; color: var(--texte-tres-doux); padding: 8px 14px; border-top: 1px solid var(--bord) }
.dec-chemin code { font-size: 11px }

/* ── Ce qui concerne les autres comptes ───────────────────────────────────── */
/* Priorité de Laurent du 11/09/2026 à 21h20. L'application ne montre plus à un
   compte ce qui regarde un autre compte : les gestes qui en restaient sur
   l'accueil sont ici, chacun avec son bouton. Contrairement à « À décider »,
   cette page AGIT — d'où des boutons pleins, et un bouton qui se désarme le
   temps de son geste : « Envoyer » ouvre un navigateur côté application et
   deux clics enverraient deux fois le même message à l'acheteur. */
.ac-section { margin-bottom: 18px }
.ac-section .section-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.ac-compte-badge {
  display: inline-block; min-width: 26px; text-align: center;
  font-weight: 700; color: var(--or); background: var(--carte2);
  border: 1px solid var(--bord); border-radius: 999px; padding: 0 8px; margin-right: 4px;
}
.ac-compte-badge.ac-zero { color: var(--texte-doux) }
.ac-sous { font-size: 12px; color: var(--texte-tres-doux) }
.ac-contexte { font-size: 12px; color: var(--texte-doux); padding: 8px 14px 0 }

.ac-liste { list-style: none; margin: 0; padding: 0 }
.ac-ligne { border-top: 1px solid var(--bord); padding: 12px 14px }
.ac-ligne:first-child { border-top: none }
/* Une ligne rangée reste lisible : elle pâlit, elle ne disparaît pas. Une ligne
   qu'on ne voit plus est une ligne dont personne ne peut dire si le geste a
   marché. */
.ac-rangee { opacity: .55 }
.ac-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.ac-objet { font-size: 14px; font-weight: 600; min-width: 0 }
.ac-etiq {
  font-size: 11px; color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: 999px; padding: 1px 8px;
}
.ac-etiq-compte { color: var(--or); border-color: var(--or) }
.ac-etiq-operateur { color: var(--vert); border-color: var(--vert) }
.ac-etiq-alerte { color: var(--rouge); border-color: var(--rouge) }
.ac-detail { display: block; font-size: 13px; color: var(--texte-doux); margin-top: 5px }
.ac-manque { color: var(--rouge) }
/* Le texte de la réponse, mot pour mot. Une alerte qui dit « une réponse
   attend » sans la montrer oblige à ouvrir la plateforme pour décider. */
.ac-texte {
  display: block; margin-top: 7px; padding: 8px 10px;
  background: var(--carte2); border: 1px solid var(--bord); border-radius: var(--rayon-sm);
  font-size: 13px; color: var(--texte); white-space: pre-wrap; word-break: break-word;
}
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center }
/* LE PLANCHER DE 40 px, COMME LES CINQ AUTRES FAMILLES DE CE FICHIER.
   Relevé du 12 septembre 2026, écran de 390 px : les 29 boutons de la page
   mesuraient 32 ou 34 px de haut, zéro n'atteignait 40. DESIGN.md demande 40 px
   de hauteur utile sur toute cible principale, et `.ac-*` est la seule famille
   à ne pas l'avoir — c'est justement celle dont les boutons AGISSENT
   (« Relancer » remet un dépôt en file, « Ranger » écrit en base).
   `inline-flex` n'est pas décoratif : sans lui le texte se colle en haut de la
   boîte agrandie, et sur `.ac-lien`, qui est un `<a>` inline, `min-height` ne
   vaudrait rien du tout hors d'un conteneur flex. */
.ac-btn {
  font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  padding: 7px 12px; border-radius: var(--rayon-sm);
  border: 1px solid var(--bord); background: var(--carte2); color: var(--texte);
}
.ac-btn:hover:not(:disabled) { border-color: var(--or); color: var(--or) }
.ac-btn:disabled { opacity: .5; cursor: default }
.ac-btn-fort { border-color: var(--or); color: var(--or); font-weight: 600 }
.ac-lien {
  font-size: 12px; color: var(--or); text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 7px 2px;
}
.ac-lien:hover { text-decoration: underline }
.ac-note { font-size: 12px; color: var(--texte-doux) }
.ac-note-ko { color: var(--rouge) }
.ac-note-ok { color: var(--vert) }
.ac-vide { font-size: 13px; color: var(--texte-doux); padding: 12px 14px }

/* Le repli des lignes sans geste : fermé par défaut, et sa poignée tient le
   plancher tactile de DESIGN.md comme les boutons de la même page. */
.ac-repli { border-top: 1px solid var(--bord) }
.ac-repli > summary {
  font-size: 12px; color: var(--texte-doux); padding: 12px 14px;
  min-height: 40px; cursor: pointer; list-style-position: inside;
}
.ac-repli > summary:hover { color: var(--texte) }
.ac-repli[open] > summary { border-bottom: 1px solid var(--bord) }

.ac-table { width: 100%; border-collapse: collapse; font-size: 13px }
.ac-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte-tres-doux);
  padding: 8px 14px; border-bottom: 1px solid var(--bord);
}
.ac-table td { padding: 8px 14px; border-top: 1px solid var(--bord) }
.ac-table td.ac-nb { text-align: right; font-variant-numeric: tabular-nums }
.ac-table tr.ac-sans-compte td { color: var(--rouge) }

/* SEPT COLONNES NE TIENNENT PAS DANS 390 px, ET TROIS D'ENTRE ELLES ÉTAIENT
   HORS D'ATTEINTE. Relevé du 12 septembre 2026 à 05h26, écran de 390 px : le
   tableau demandait 609 px, `.section` n'en offrait que 356, et le débordement
   était mangé par le `overflow: hidden` que ce porteur porte pour son
   `border-radius` (app.css:148) — la page, elle, ne défile pas en largeur.
   « Réponses », « À retirer » et « Dépôts ratés » commençaient donc après le
   bord droit de l'écran et RIEN n'y menait, alors que ce sont précisément les
   colonnes qui disent quel compte attend un geste.
   On replie en une carte par compte plutôt que de rendre le tableau défilable :
   un tableau qui glisse sous le pouce est une cible tactile de plus, et la
   contrainte demandée est que les sept chiffres se lisent « sans les chercher ».
   Même geste que `.cv-table` plus bas, au même seuil ; à 768 px le tableau tient
   encore largement (734 px de contenu pour 609 px demandés), donc aucune largeur
   ne laisse jamais un tableau coupé. */
@media (max-width: 768px) {
  .ac-table, .ac-table tbody, .ac-table tr, .ac-table td { display: block; width: auto }
  .ac-table thead { display: none }
  .ac-table tr { border-top: 1px solid var(--bord); padding: 10px 14px }
  .ac-table td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border-top: none; padding: 3px 0;
  }
  /* La première cellule est le nom du compte : c'est le titre de la carte, pas
     une ligne « Compte — Mounie ». */
  .ac-table td:first-child {
    display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px;
  }
  .ac-table td.ac-nb { text-align: right }
  /* L'ÉTIQUETTE DE CHAQUE CHIFFRE. Elle est écrite ici, l'en-tête du tableau est
     écrit dans `acTableComptes()` de public/app.js : les deux se suivent par le
     rang de la colonne et rien d'autre.
     `tests/autres-comptes-telephone.test.mjs` compare les sept libellés mot pour
     mot, pour qu'une colonne ajoutée ou déplacée casse un test plutôt que de
     coller en silence le mauvais nom sur le bon chiffre. */
  .ac-table td:nth-child(n+2)::before {
    color: var(--texte-tres-doux); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .ac-table td:nth-child(2)::before { content: 'Objets' }
  .ac-table td:nth-child(3)::before { content: 'Ventes' }
  .ac-table td:nth-child(4)::before { content: 'dont en cours' }
  .ac-table td:nth-child(5)::before { content: 'Archivés' }
  .ac-table td:nth-child(6)::before { content: 'Réponses' }
  .ac-table td:nth-child(7)::before { content: 'À retirer' }
  .ac-table td:nth-child(8)::before { content: 'Dépôts ratés' }
}

/* ── Couverture des plateformes ───────────────────────────────────────────── */
/* Une grille : une ligne par objet, trois colonnes. La couleur ne dit PAS la
   gravité, elle dit QUI DOIT BOUGER — rouge quelqu'un, doré la machine, gris
   une décision déjà prise. Une case grise n'est pas un problème en attente de
   couleur, c'est un problème qui n'en est pas un. */
.cv-raisons { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px }
.cv-raison {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(160,144,128,.08); border: 1px solid var(--bord); color: var(--texte-doux);
}
.cv-raison-nb { font-weight: 700; font-size: 13px; color: var(--texte) }
.cv-raison.cv-sens-humain  { border-color: rgba(196,112,95,.45); background: rgba(196,112,95,.1) }
.cv-raison.cv-sens-machine { border-color: rgba(217,164,65,.35);  background: rgba(217,164,65,.08) }
.cv-raison.cv-sens-choisi  { border-color: var(--bord) }

.cv-legende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 0 18px 14px; font-size: 12px; color: var(--texte-tres-doux);
}
.cv-puce { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--texte-tres-doux) }
.cv-puce.cv-sens-humain  { background: var(--rouge) }
.cv-puce.cv-sens-machine { background: var(--or) }
.cv-puce.cv-sens-choisi  { background: var(--texte-tres-doux) }

.cv-onglet { cursor: pointer }
.cv-onglet-actif { border-color: var(--or); color: var(--or) }
.cv-onglet-nb { color: var(--texte-tres-doux); margin-left: 4px }

.cv-table { table-layout: fixed }
.cv-table th { font-size: 12px }
.cv-th-nb { display: block; font-weight: 400; color: var(--texte-tres-doux); font-size: 11px; margin-top: 2px }
.cv-table th:first-child, .cv-objet { width: 34% }

.cv-objet { display: flex; align-items: flex-start; gap: 10px; min-width: 0 }
.cv-photo {
  width: 40px; height: 40px; flex-shrink: 0; object-fit: cover;
  border-radius: var(--rayon-sm); background: var(--fond); border: 1px solid var(--bord);
}
.cv-photo-vide { display: inline-block }
.cv-objet-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.cv-titre { color: var(--texte); font-size: 13px; line-height: 1.3 }
.cv-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--texte-tres-doux); font-size: 11px }
.cv-etiq { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--bord); font-size: 10px }
.cv-etiq-humain { border-color: rgba(196,112,95,.45); color: var(--rouge) }

.cv-case { vertical-align: top; font-size: 12px }
.cv-case > * { display: block }
.cv-mot { color: var(--texte-doux) }
.cv-pleine .cv-mot, .cv-lien { color: var(--vert) }
.cv-lien { text-decoration: none }
.cv-lien:hover { text-decoration: underline }
.cv-vide.cv-sens-humain  .cv-mot { color: var(--rouge) }
.cv-vide.cv-sens-machine .cv-mot { color: var(--or) }
.cv-vide.cv-sens-choisi  .cv-mot { color: var(--texte-tres-doux) }
.cv-depuis { color: var(--texte-tres-doux); font-size: 11px; margin-top: 2px }
/* Le motif est coupé à deux lignes : entier, il pousse la grille hors de
   l'écran et on ne lit plus la colonne d'à côté. Le texte complet est dans
   l'infobulle. */
.cv-motif {
  color: var(--texte-tres-doux); font-size: 11px; margin-top: 4px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Un objet complet reste visible, en retrait : le cacher ferait de cette page
   une liste d'ennuis de plus, et ce n'est pas ce qui a été demandé. */
.cv-complet .cv-titre { color: var(--texte-doux) }

.cv-note { color: var(--texte-tres-doux); font-size: 11px; line-height: 1.6; margin-top: 14px }

/* ── LES QUATRE ÉTATS (19 septembre 2026) ─────────────────────────────────
   « Absent sans raison » est le seul qui doive sauter aux yeux : c'est ce que
   Laurent a interdit ce matin-là. Les trois autres se distinguent sans crier —
   une page où tout est rouge ne signale plus rien. Le mot de l'état passe donc
   devant le détail de la file, qui descend d'un cran en gris. */
.cv-detail { color: var(--texte-tres-doux); font-size: 11px; margin-top: 2px }
.cv-vide .cv-mot { font-weight: 600 }
.cv-etat-prevu_pas_fait .cv-mot { color: var(--or) }
.cv-etat-absent_avec_raison .cv-mot { color: var(--texte-tres-doux) }
.cv-etat-absent_sans_raison { background: rgba(196,112,95,.12) }
.cv-etat-absent_sans_raison .cv-mot { color: var(--rouge) }
.cv-ligne-sans-raison .cv-titre { color: var(--rouge) }
.cv-etiq-sans-raison { border-color: var(--rouge); color: var(--rouge) }
.cv-carte-alerte { border-color: rgba(196,112,95,.55) }
.cv-alerte {
  border: 1px solid rgba(196,112,95,.55); background: rgba(196,112,95,.1);
  border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 20px;
  color: var(--rouge); font-size: 13px; line-height: 1.5;
}
/* Trois cartes, trois nombres. `auto-fill` en poserait quatre par ligne sur un
   grand écran et laisserait un trou à droite : ici la ligne est une phrase,
   « tant en ligne, tant manquants, tant sans raison ». */
.stats-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.cv-prix { color: var(--texte); font-variant-numeric: tabular-nums }
.cv-tri { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-doux) }

@media (max-width: 768px) {
  /* Sur téléphone, la grille passe en cartes : trois colonnes de 33 % rendent
     « bloquée par le contrôle photo » illisible en huit lignes d'un mot. */
  .cv-table, .cv-table tbody, .cv-table tr, .cv-table td { display: block; width: auto }
  .cv-table thead { display: none }
  .cv-ligne {
    border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: 12px; margin-bottom: 10px; background: var(--carte);
  }
  .cv-table td { border: none; padding: 4px 0 }
  .cv-case::before {
    content: attr(data-plateforme); display: block;
    color: var(--texte-tres-doux); font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  }
  .cv-table th:first-child, .cv-objet { width: auto }
}

/* ── Changer le déposant d'un objet ────────────────────────────────────────
   Le panneau réutilise `.modal-overlay` / `.modal` du visualiseur de logs ;
   seul le corps change, parce que `.modal-body` est en monospace pré-formaté
   et qu'ici on lit des phrases, pas un journal. */
.reattr-corps {
  font-family: inherit; font-size: 13px; white-space: normal;
  color: var(--texte); line-height: 1.6;
}
.reattr-actuel { font-size: 14px; margin-bottom: 6px }
.reattr-id { font-family: monospace; font-size: 11px; color: var(--texte-tres-doux); margin-left: 8px }
.reattr-note { color: var(--texte-doux); font-size: 12px; margin: 0 0 14px }
.reattr-retour {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 10px 12px; margin-bottom: 14px; font-size: 12px; color: var(--texte-doux);
}
.reattr-label {
  display: block; margin: 12px 0 5px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-tres-doux);
}
.reattr-champ {
  width: 100%; box-sizing: border-box;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 4px;
  color: var(--texte); font-family: inherit; font-size: 13px; padding: 8px 10px;
}
.reattr-champ:focus { border-color: var(--or); outline: none }
.reattr-champ:disabled { opacity: .5 }
textarea.reattr-raison { resize: vertical; line-height: 1.5 }
.reattr-compteur { font-size: 11px; color: var(--texte-tres-doux); margin-top: 4px; min-height: 14px }
.reattr-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap }
.reattr-appliquer:not(:disabled) { border-color: var(--or); color: var(--or) }

/* LE REFUS EST CELUI DU MODULE, mot pour mot : il se lit en entier, il ne se
   résume pas. « Cet objet est vendu : le montant est dû à… » dit à la fois ce
   qui est refusé et à qui parler ensuite. */
.reattr-refus {
  margin-top: 14px; padding: 10px 12px; font-size: 12px; line-height: 1.6;
  border: 1px solid var(--rouge); border-radius: var(--rayon); color: var(--rouge);
}
.reattr-plan {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond);
}
.reattr-plan-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-tres-doux); margin-top: 10px }
.reattr-plan-titre:first-child { margin-top: 0 }
.reattr-plan-sens { font-size: 15px; margin: 6px 0 10px }
.reattr-plan-liste { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--texte-doux) }
.reattr-plan-liste code { font-family: monospace; font-size: 11px; color: var(--texte) }
.reattr-fait {
  margin-top: 14px; padding: 12px 14px; font-size: 13px;
  border: 1px solid var(--vert); border-radius: var(--rayon);
}
.reattr-section-titre {
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--bord);
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-tres-doux);
}
.reattr-vide { color: var(--texte-tres-doux); font-size: 12px; padding: 10px 0 }
.reattr-mouvement { padding: 10px 0; border-bottom: 1px solid var(--bord) }
.reattr-mouvement:last-child { border-bottom: none }
.reattr-mouvement-tete { font-size: 13px }
.reattr-mouvement-sous { font-size: 11px; color: var(--texte-tres-doux); margin-top: 2px }
.reattr-mouvement-raison { font-size: 12px; color: var(--texte-doux); margin-top: 5px }

/* ---- Les pages fusionnées, et les trois familles de « À décider » ----
   18 septembre 2026, demande de Laurent à 21h30. « À décider » porte
   maintenant les questions, les doublons présumés et les échecs. Fusionner
   n'est pas mélanger : chaque famille garde son étiquette et son bloc, et la
   barre au-dessus n'en montre qu'une à la fois. L'ORDRE DES BLOCS vient du
   coût de la décision qu'on repousse, il est calculé dans app.js ; ici on ne
   fait que peindre. */
.fam-filtre {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
}
.fam-onglet {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 999px; color: var(--texte-doux);
  padding: 7px 14px; font-size: 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.fam-onglet:hover { color: var(--texte); border-color: var(--texte-tres-doux) }
.fam-onglet.actif { color: var(--or); border-color: var(--or) }
.fam-onglet-nb {
  font-size: 11px; font-weight: 600; color: var(--texte-tres-doux);
  background: var(--carte2); border-radius: 999px; padding: 1px 7px;
}
.fam-onglet.actif .fam-onglet-nb { color: var(--or-pale) }

/* L'étiquette de la famille : elle reste visible même quand le filtre est sur
   « Tout », parce que c'est elle qui dit de quelle page d'avant vient la
   ligne qu'on lit. */
.fam-bloc { margin-bottom: 26px }
.fam-bloc[hidden] { display: none }
.fam-bloc .page-title { font-size: 17px; margin-top: 0 }
.fam-etiquette {
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .8px; font-weight: 600; color: var(--texte-tres-doux);
  border: 1px solid var(--bord); border-radius: 999px;
  padding: 2px 10px; margin-bottom: 8px;
}
.fam-etiquette[data-famille="doublon"] { color: var(--bleu); border-color: rgba(95,143,196,.4) }
.fam-etiquette[data-famille="echec"] { color: var(--rouge); border-color: rgba(196,112,95,.4) }
.fam-etiquette[data-famille="question"] { color: var(--or); border-color: rgba(217,164,65,.4) }

/* Les autres fusions s'empilent : deux pages l'une sous l'autre, séparées par
   un trait, et chacune garde son propre titre. Rien n'est caché derrière un
   clic — une page fusionnée qui montre moins que la somme des deux est une
   régression, même si elle est plus jolie. */
#page-comptes > div + div,
#page-objets > div + div,
#page-file > div + div {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--bord);
}

/* ── PRENDRE UNE DÉCISION (18/09/2026) ────────────────────────────────────────
   Un champ de texte libre et des boutons, sur la ligne même. Le champ tient sur
   une ligne au repos et grandit en cliquant dedans : un commentaire est
   facultatif, l'écran ne doit pas le réclamer par sa taille. */
.dec-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bord);
}
.dec-commentaire {
  flex: 1 1 220px; min-width: 160px; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.4;
  padding: 5px 8px; border: 1px solid var(--bord); border-radius: 6px;
  background: var(--fond); color: var(--texte);
}
.dec-commentaire:focus { outline: 2px solid var(--accent, #4a7); outline-offset: -1px; min-height: 52px }
.dec-boutons { display: flex; flex-wrap: wrap; gap: 6px }
/* UN ÉCHEC D'APPLICATION SE LIT, IL NE SE DEVINE PAS : la décision est
   enregistrée, elle n'est pas appliquée, et la ligne reste. */
.dec-echec {
  flex: 1 1 100%; font-size: 13px; line-height: 1.45;
  padding: 6px 9px; border-radius: 6px;
  background: rgba(200, 60, 60, .12); color: var(--rouge, #c33);
  border: 1px solid rgba(200, 60, 60, .35);
}

/* ── LA PAGE OBJETS (ticket rang 2 du 18/09/2026) ───────────────────────────
   Trois états par plateforme, pas deux : « en ligne » (un lien), « manque »
   (prévu et absent, donc un retard), « — » (pas prévu, donc une décision).
   C'est la distinction qui a coûté une soirée le 18 septembre, quand la page
   ne portait ni eBay ni la différence entre les deux dernières. */
.obj-etat {
  display: inline-block; font-size: 11px; line-height: 1.5;
  padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}
.obj-en-ligne  { color: var(--vert) }
/* « manque » se voit de loin : c'est la seule case de la page sur laquelle on
   agit. « pas prévu » se lit à peine, c'est un état normal. */
.obj-manque    { background: rgba(217,164,65,.18); color: var(--or); font-weight: 600 }
.obj-pas-prevu { color: var(--texte-tres-doux) }
.obj-vivant    { color: var(--texte-tres-doux) }
.obj-sorti     { background: rgba(160,144,128,.14); color: var(--texte-doux) }
.obj-decision  { background: rgba(95,143,196,.15); color: var(--bleu) }
.obj-ennui     { background: rgba(196,112,95,.15); color: var(--rouge) }

/* LES DEUX LISTES DE LAURENT, EN UN CLIC. Elles portent leur compte : un
   raccourci qui afficherait « 0 » sans qu'on sache si c'est vrai ne servirait
   à rien. */
.obj-raccourcis { margin-bottom: 8px }
.obj-raccourci { cursor: pointer; display: inline-flex; align-items: center; gap: 7px }
.obj-raccourci:hover { border-color: var(--or) }
.obj-raccourci-actif { border-color: var(--or); color: var(--or) }
.obj-raccourci-nb {
  display: inline-block; min-width: 18px; text-align: center;
  padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600;
  background: rgba(217,164,65,.2); color: var(--or);
}

/* ══ L'ONGLET « RETOURS » (22/09/2026) ═════════════════════════════════════
   Laurent écrit d'ici, depuis son téléphone la plupart du temps : la zone de
   texte est grande, le bouton d'envoi est à portée de pouce, et la liste des
   retours déjà envoyés est SOUS le champ — on vient écrire, pas relire. */

/* Le choix du nom, à la connexion. Deux boutons plutôt qu'un menu : à deux
   personnes, un menu déroulant coûte un geste de plus pour rien. */
.login-qui { display: flex; gap: 8px; margin-top: 14px }
.login-qui-choix {
  flex: 1; padding: 10px; background: var(--carte2); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon-sm); cursor: pointer;
}
.login-qui-choix:hover { border-color: var(--or); color: var(--texte) }
.login-qui-choix.active { border-color: var(--or); color: var(--or); background: rgba(217,164,65,.12) }

.ret-form {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px; margin-bottom: 24px;
}
.ret-ligne-dest { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.ret-label { font-size: 12px; color: var(--texte-tres-doux); text-transform: uppercase; letter-spacing: .5px }
.ret-dests { display: flex; gap: 8px; flex-wrap: wrap }
.ret-dest {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px; background: var(--carte2); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon-sm); cursor: pointer; text-align: left;
}
.ret-dest:hover { border-color: var(--or) }
.ret-dest.active { border-color: var(--or); background: rgba(217,164,65,.12) }
.ret-dest-nom { font-weight: 600; color: var(--texte) }
.ret-dest-quoi { font-size: 11px; color: var(--texte-tres-doux) }

.ret-texte {
  width: 100%; padding: 12px; background: var(--carte2); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--rayon-sm); font: inherit; resize: vertical;
}
.ret-texte:focus { outline: none; border-color: var(--or) }

.ret-pieces { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px }
.ret-joindre {
  padding: 8px 14px; background: var(--carte2); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon-sm); cursor: pointer; font-size: 13px;
}
.ret-joindre:hover { border-color: var(--or); color: var(--texte) }
.ret-astuce { font-size: 12px; color: var(--texte-tres-doux) }

.ret-vignettes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px }
.ret-vignette { position: relative; width: 92px; height: 92px; border-radius: var(--rayon-sm); overflow: hidden; border: 1px solid var(--bord) }
.ret-vignette img { width: 100%; height: 100%; object-fit: cover; display: block }
.ret-vignette-x {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; line-height: 1;
  background: rgba(18,16,14,.85); color: var(--texte); border: none; border-radius: 50%; cursor: pointer;
}

.ret-envoi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px }
.btn-principal {
  padding: 11px 24px; background: var(--or); color: #1b1512; border: none;
  border-radius: var(--rayon-sm); font-weight: 600; cursor: pointer;
}
.btn-principal:hover { background: var(--or-pale) }
.btn-principal:disabled { opacity: .5; cursor: default }
.ret-etat-envoi { font-size: 13px; color: var(--texte-doux) }
.ret-etat-rouge { color: var(--rouge) }
.ret-etat-vert { color: var(--vert) }

.ret-liste-titre { font-size: 13px; color: var(--texte-doux); margin-bottom: 10px; font-weight: 600 }
.ret-table td { vertical-align: top }
.ret-quand { white-space: nowrap; color: var(--texte-doux); font-size: 13px }
.ret-heure { color: var(--texte-tres-doux); font-size: 12px }
.ret-titre { font-weight: 600 }
.ret-citation { font-size: 12px; color: var(--texte-tres-doux); margin-top: 4px; max-width: 46em }
.ret-tickets { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap }
.ret-ticket {
  font-size: 11px; padding: 3px 8px; background: var(--carte2); border: 1px solid var(--bord);
  border-radius: 999px; cursor: pointer; color: var(--texte-doux);
  max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ret-ticket:hover { border-color: var(--or); color: var(--or) }
.ret-note { margin-top: 14px; font-size: 12px; color: var(--texte-tres-doux); max-width: 54em }

/* Sur téléphone, le champ prend toute la largeur et les deux destinataires
   passent l'un sous l'autre : c'est l'écran depuis lequel Laurent écrit. */
@media (max-width: 768px) {
  .ret-dests { width: 100% }
  .ret-dest { flex: 1 }
  .ret-envoi .btn-principal { flex: 1; min-height: 48px }
}