/* ============================================================
   Refonte v2 — écran « Tâches » (lot 3)

   Bâti sur les motifs du lot 2 : les cartes KPI, les segments de
   filtre, le tableau de liste, les pastilles et les états vides
   viennent de v2-motifs.css et ne sont pas redéfinis ici. Cette
   feuille ne contient que ce qui est propre à l'écran.

   Portée : tout est sous `.tv-page`, qui porte `data-v2`. Les cinq
   jetons préfixés --v2- (bg, text, text-2, text-3, accent) ne peuvent
   plus être confondus avec leurs homonymes de styles.css : c'est le
   sens du préfixe. Le balisage n'émet que des classes `tv-*` et `m-*`.
   ============================================================ */

.tv-page {
  padding: 0 30px 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font);
  color: var(--v2-text);
  -webkit-font-smoothing: antialiased;
}

/* ── La rangée de chiffres ───────────────────────────────────
   Quatre cartes KPI compactes : ici le chiffre répond à « combien »,
   pas à « combien d'euros », donc 24 px et pas 25. */
.tv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tv-stat {
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* LE SÉPARATEUR DE MILLIERS DOIT SURVIVRE AU CRÉNAGE.
   Les chiffres d'affichage portent `letter-spacing: -.04em`, qui resserre
   TOUS les caractères — y compris l'espace insécable qui sépare les
   milliers. À 25 px, « 108 075 » se lisait « 108075 ». Le caractère n'y
   est pour rien : U+202F, U+00A0 et U+2009 rendent la même chose une fois
   crénés. `word-spacing` ne touche que les espaces, donc uniquement ce
   séparateur, et lui rend sa lisibilité sans desserrer les chiffres. */
.tv-stat-v {
  word-spacing: .12em;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--m-fg, var(--v2-text));
}
.tv-stat-l { font-size: 11px; color: var(--v2-text-3); margin-top: 1px; }
.tv-stat[data-statut="neg"] { --m-fg: var(--neg-fg); }
.tv-stat[data-statut="pos"] { --m-fg: var(--pos-fg); }
/* Plus d'ambre sur un chiffre de statut : l'ambre appartient aux boutons.
   L'urgence se dit ici par l'encre pleine, pas par une couleur de plus. */
/* Renommé « accent » → « jour » : la valeur ne rend plus d'ambre, garder
   son ancien nom aurait fait croire le contraire au prochain lecteur. */
.tv-stat[data-statut="jour"] { --m-fg: var(--v2-text); }
/* Un zéro n'est pas une alerte : il reprend l'encre neutre, sinon
   « 0 en retard » s'affiche en rouge et le rouge ne veut plus rien dire. */
.tv-stat[data-zero] { --m-fg: var(--v2-text-3); }

/* ── Le panneau principal ────────────────────────────────── */
.tv-panneau {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

/* Barre de filtres */
.tv-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--stroke);
  flex-wrap: wrap;
}
.tv-retard {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--neg-fg);
}
.tv-retard b { font-weight: 680; font-variant-numeric: tabular-nums; }
.tv-retard svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ── La ligne d'ajout ────────────────────────────────────────
   Repliée, elle ressemble à une ligne de tâche vide : c'est la
   maquette. Les options n'apparaissent qu'une fois le champ actif,
   sinon cinq listes déroulantes accueillent l'écran. */
.tv-ajout {
  border-bottom: 1px solid var(--stroke-2);
  background: var(--panel-2);
}
.tv-ajout-l1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
}
.tv-rond {
  width: 17px; height: 17px;
  border-radius: 99px;
  border: 1.5px dashed var(--stroke);
  flex-shrink: 0;
}
.tv-ajout-champ {
  all: unset;
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--v2-text);
}
.tv-ajout-champ::placeholder { color: var(--v2-text-3); }

/* Les options : cachées tant que la ligne n'est pas dépliée. */
.tv-ajout-opts {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px 45px;
}
.tv-ajout.ouvert .tv-ajout-opts { display: flex; }
.tv-ajout-opts select,
.tv-ajout-opts input[type="date"] {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 550;
  color: var(--v2-text-2);
  height: 28px;
  padding: 0 9px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: var(--panel-solid);
  cursor: pointer;
}
.tv-ajout-opts select:disabled { opacity: .5; cursor: not-allowed; }
.tv-ajout-add {
  all: unset;
  cursor: pointer;
  height: 28px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 99px;
  background: var(--accent-bright);
  color: var(--sur-accent, #1b1a12);
  font-size: 12.5px;
  font-weight: 640;
  box-shadow: var(--shadow-sm);
  transition: filter .14s ease;
}
.tv-ajout-add:hover { filter: brightness(1.06); }
.tv-ajout-add svg { width: 14px; height: 14px; }
/* Indice discret, seulement quand la ligne est repliée. */
.tv-ajout-indice {
  font-size: 11px;
  color: var(--v2-text-3);
  flex-shrink: 0;
  white-space: nowrap;
}
.tv-ajout.ouvert .tv-ajout-indice { display: none; }

/* ── Une ligne de tâche ────────────────────────────────────── */
.tv-l {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke-2);
  transition: background .14s ease;
}
.tv-l:last-child { border-bottom: 0; }
.tv-l:hover { background: var(--inset); }
.tv-l:focus-within { background: var(--inset); }

/* La case à cocher : pleine et verte une fois faite. */
.tv-case {
  all: unset;
  cursor: pointer;
  width: 18px; height: 18px;
  border-radius: 99px;
  border: 1.5px solid var(--stroke);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color .14s ease, background .14s ease;
}
.tv-case:hover { border-color: var(--pos-fg); }
.tv-case:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
.tv-case.on { border-color: var(--pos-fg); background: var(--pos-fg); }
/* `--on-tone` est exactement le jeton prévu pour une encre posée sur un
   aplat de statut : blanc en clair, encre sombre en thème sombre. Un #fff
   en dur aurait fonctionné en clair et bavé en sombre. */
.tv-case svg { width: 11px; height: 11px; stroke: var(--on-tone); stroke-width: 3; }

.tv-txt {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--v2-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-l.faite .tv-txt { color: var(--v2-text-3); text-decoration: line-through; }

/* Étiquette de fiche rattachée : contour, pas de fond — elle ne
   porte pas de statut, seulement une provenance. */
.tv-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 550;
  color: var(--v2-text-2);
  border: 1px solid var(--stroke);
  flex-shrink: 0;
  cursor: pointer;
  max-width: 190px;
  transition: background .14s ease;
}
.tv-tag:hover { background: var(--inset); }
.tv-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-tag svg { width: 12px; height: 12px; flex: 0 0 12px; }

/* Échéance : encre + fond de la paire de statut, comme une pastille. */
.tv-ech {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 22px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 550;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text-2);
  background: var(--inset);
}
/* Variante nue : pas d'échéance, ou une simple mention (un destinataire).
   Elle garde la gouttière du motif pour que la colonne reste alignée,
   mais ne prétend pas porter un statut. */
.tv-ech-nue { background: transparent; color: var(--v2-text-3); }
.tv-ech[data-statut="neg"]    { color: var(--neg-fg); background: var(--neg-soft); }
/* QUATRE CRANS D'URGENCE, SANS DÉPENSER DE COULEUR
   L'ambre est parti — il appartient aux boutons. L'urgence se dit donc par
   l'encre et la graisse, ce qui donne quatre niveaux distincts :
     en retard   rouge sur fond rouge pâle
     aujourd'hui encre pleine, graisse 640
     demain      encre pleine, graisse 550
     au-delà     encre secondaire, graisse 550
   « demain » et « dans 9 jours » ne devaient surtout pas se ressembler :
   c'est là que l'échelle se serait cassée. */
.tv-ech[data-statut="jour"]   { color: var(--v2-text); background: var(--inset); font-weight: 640; }
.tv-ech[data-statut="demain"] { color: var(--v2-text); background: var(--inset); }
.tv-l.faite .tv-ech { color: var(--v2-text-3); background: transparent; }

/* Qui : initiales. Ambre pour moi, sarcelle pour un collègue —
   au premier coup d'œil on voit ce qui ne vient pas de soi. */
.tv-qui {
  width: 22px; height: 22px;
  border-radius: 99px;
  background: var(--inset);
  color: var(--v2-text-2);
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tv-qui[data-autre] { background: var(--teal-soft); color: var(--teal-fg); }

.tv-act { display: flex; gap: 2px; flex-shrink: 0; }
.tv-act button {
  all: unset;
  cursor: pointer;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  color: var(--v2-text-3);
  transition: background .14s ease, color .14s ease;
}
.tv-act button:hover { background: var(--inset); color: var(--v2-text); }
.tv-act button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
.tv-act button.danger:hover { color: var(--neg-fg); background: var(--neg-soft); }
.tv-act button:disabled { opacity: .35; cursor: not-allowed; }
.tv-act svg { width: 14px; height: 14px; }
/* Les actions n'apparaissent qu'au survol : trois icônes sur chaque
   ligne, en permanence, c'est la liste qu'on ne lit plus. */
@media (hover: hover) {
  .tv-act { opacity: 0; transition: opacity .14s ease; }
  .tv-l:hover .tv-act, .tv-l:focus-within .tv-act { opacity: 1; }
}

/* ── Les sous-titres de groupe, dans la vue « Toutes » ─────── */
.tv-sec {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke-2);
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
.tv-sec b {
  font-variant-numeric: tabular-nums;
  font-weight: 640;
  letter-spacing: 0;
  font-size: 11px;
}
.tv-sec::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 99px;
  background: currentColor;
  flex-shrink: 0;
}
.tv-sec[data-statut="neg"] { color: var(--neg-fg); }
.tv-sec[data-statut="jour"] { color: var(--v2-text); }
.tv-sec[data-statut="pos"] { color: var(--pos-fg); }

/* ── Ce que j'ai transmis ────────────────────────────────────
   Absent de la maquette, gardé parce que c'est une vraie
   fonctionnalité du CRM : ce qu'on a confié et qui n'est pas
   revenu est précisément ce qu'on oublie. */
.tv-transmis-tete {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--stroke);
}
.tv-transmis-tete h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--v2-text);
}
.tv-transmis-tete svg { width: 15px; height: 15px; color: var(--v2-text-3); }
.tv-transmis-l {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--stroke-2);
}
.tv-transmis-l:last-child { border-bottom: 0; }
.tv-transmis-txt {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--v2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-transmis-l.supprimee .tv-transmis-txt { color: var(--v2-text-3); text-decoration: line-through; }
.tv-transmis-motif {
  padding: 0 18px 11px 18px;
  margin-top: -6px;
  font-size: 11.5px;
  color: var(--v2-text-3);
  font-style: italic;
}

@media (max-width: 1100px) {
  .tv-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .tv-page { padding: 0 14px 60px; }
  .tv-stats { grid-template-columns: repeat(2, 1fr); }
  /* L'étiquette de fiche ne disparaît PAS : elle porte data-ptodo-open-card,
     c'est le seul chemin vers la fiche rattachée depuis cette liste. On la
     réduit à son icône, on ne la supprime pas — masquer le seul accès à une
     fonction, c'est la retirer du téléphone. */
  .tv-tag { max-width: none; padding: 0 7px; }
  .tv-tag span { display: none; }
  .tv-qui { display: none; }
  .tv-ech { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-l, .tv-case, .tv-act, .tv-act button, .tv-tag, .tv-ajout-add { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   LES RÉPONSES (11/08/2026) — le canal de retour qui manquait.
   Le destinataire répond sous la tâche reçue ; l'expéditeur lit la
   réponse sous la ligne transmise. Un fil, pas une concaténation.
   ══════════════════════════════════════════════════════════════ */

/* Deux volets côte à côte dès que l'écran le permet : ce que J'AI à
   faire à gauche, ce que J'AI CONFIÉ à droite. Les stats en bandeau. */
@media (min-width: 1100px) {
  [data-v2].tv-page { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: start; }
  [data-v2].tv-page > .tv-stats { grid-column: 1 / -1; }
}

/* — Le fil — */
[data-v2] .tv-fil { display: flex; flex-direction: column; gap: 4px; padding: 2px 14px 10px 46px; }
[data-v2] .tv-rep { display: flex; align-items: baseline; gap: 8px; font-size: 12px; min-width: 0; }
[data-v2] .tv-rep-qui { font-weight: 640; color: var(--v2-text-2); flex-shrink: 0; }
[data-v2] .tv-rep.de-moi .tv-rep-qui { font-weight: 550; color: var(--v2-text-3); }
[data-v2] .tv-rep-txt { color: var(--v2-text-2); overflow-wrap: anywhere; }
[data-v2] .tv-rep-date { margin-left: auto; font-size: 10.5px; color: var(--v2-text-3); flex-shrink: 0; }

/* — Le formulaire de réponse — */
[data-v2] .tv-rep-form { display: flex; gap: 8px; padding: 6px 14px 10px 46px; }
[data-v2] .tv-rep-form input {
  flex: 1; min-width: 0; height: 32px; padding: 0 13px;
  border-radius: 99px; border: 1px solid var(--stroke);
  background: var(--panel-solid); font: inherit; font-size: 12.5px; color: var(--v2-text);
}
[data-v2] .tv-rep-form input::placeholder { color: var(--v2-text-3); }
[data-v2] .tv-rep-form input:focus { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2] .tv-rep-form button {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 99px;
  background: var(--accent-bright); color: var(--sur-accent, #1b1a12);
  font-size: 12.5px; font-weight: 620; flex-shrink: 0;
}
[data-v2] .tv-rep-form button:hover { filter: brightness(1.05); }

/* — La transmise, restructurée : initiales · corps · état · écrire — */
[data-v2] .tv-transmis-l { display: flex; align-items: center; gap: 10px; }
[data-v2] .tv-transmis-corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
[data-v2] .tv-transmis-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2] .tv-transmis-sous { font-size: 11px; color: var(--v2-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2] .tv-transmis-l .tv-act { opacity: 0; }
[data-v2] .tv-transmis-l:hover .tv-act, [data-v2] .tv-transmis-l:focus-within .tv-act { opacity: 1; }