/* --- Prospection : le bloc « à traiter » ------------------------------- */
/* La même forme que « En retard » sur Aujourd'hui, et c'est voulu : la même chose
 * — ce qui attend Chris — au même endroit, en accent, en tête d'écran. */

.retard-large { display: grid; gap: var(--e5); }

.deux-listes {
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.etape-tete { display: grid; gap: 3px; padding: 4px 4px 12px; }

.etape-titre-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
}

.etape-nombre {
  font-size: var(--t-texte);
  font-weight: 700;
  color: var(--encre-tenue);
}

.etape-statuts {
  font-size: var(--t-mini);
  color: var(--encre-pale);
}

.etape-vide {
  padding: var(--e4) 4px;
  font-size: var(--t-petit);
  color: var(--encre-pale);
}

/* --- Prospection : une fiche ------------------------------------------ */

.fiche {
  background: var(--surface);
  padding: var(--e4);
  display: grid;
  gap: 9px;
  border-left: 3px solid var(--f-neutre);
}

.fiche.accent  { border-left-color: var(--accent-trait); }

.fiche-tete {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
}

.fiche-ecole {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fiche-statut {
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  white-space: nowrap;
}

.fiche-qui {
  font-size: var(--t-texte);
  color: var(--encre-douce);
}

.fiche-ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
  flex-wrap: wrap;
}

.fiche-quoi {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

.fiche-silence {
  font-size: var(--t-texte);
  font-weight: 600;
  color: var(--accent-texte);
}

.fiche-montant {
  font-size: var(--t-texte);
  font-weight: 600;
  white-space: nowrap;
}

/* **L'échéance.** Elle vivait dans Notion et dans la requête, jamais à l'écran :
 * la carte disait ce qu'il y a à faire sans jamais dire quand. L'accent est réservé
 * au retard — le mettre aussi sur « demain » le viderait de son sens. */
.fiche-echeance {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

.fiche-echeance-quand {
  font-weight: 600;
  white-space: nowrap;
  color: var(--encre);
}

.fiche-retard .fiche-echeance-quand { color: var(--accent-texte); }

/* Le montant inconnu se DIT. Un blanc à la place d'un montant se lit comme une
 * petite affaire, et c'est le sens d'erreur qui fait négliger un dossier. */
.fiche-note {
  font-size: var(--t-mini);
  color: var(--encre-pale);
}

.fiche-pied {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--trait);
}

.fiche-echange {
  font-size: var(--t-petit);
  color: var(--encre-douce);
}

/* Le sens du dernier échange, en une flèche. Entrant en couleur : c'est celui qui
 * demande une réponse, et c'est l'information que Chris cherche sur cet écran. */
.fleche { font-weight: 700; color: var(--encre-tenue); }
.fleche-entrant { color: var(--f-bleu); }

/* --- Prospection : les affaires classées ------------------------------ */
/* Repliées par issue. Treize cartes de plus feraient une colonne quatre fois plus
 * haute que les autres, pour des affaires sur lesquelles il n'y a plus rien à
 * faire — mais les cacher tout à fait ferait perdre le total gagné, qui est la
 * seule bonne nouvelle de l'écran. */

.issue { background: var(--surface); }

.issue-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  padding: var(--e4);
  cursor: pointer;
  list-style: none;
}

/* Le triangle par défaut de `summary` est retiré des deux côtés : WebKit a son
 * propre pseudo-élément, et n'en retirer qu'un donnerait deux marqueurs sur
 * Safari — donc sur le téléphone de Chris. */
.issue-tete::-webkit-details-marker { display: none; }
.issue-tete::marker { content: ""; }

.issue-quoi { display: grid; gap: 3px; }

.issue-titre {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.issue-note {
  font-size: var(--t-mini);
  color: var(--encre-pale);
}

.issue-compte {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.issue-lignes { padding: 0 var(--e4) 12px; display: grid; }

.issue-ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--trait);
}

.issue-qui { display: grid; gap: 2px; min-width: 0; }

.issue-ecole { font-size: 14px; }

.issue-quand {
  font-size: var(--t-mini);
  color: var(--encre-pale);
}

.issue-montant {
  font-size: var(--t-texte);
  font-weight: 600;
  white-space: nowrap;
  color: var(--encre-douce);
}

/* ── La page détaillée d'une opportunité ──────────────────────────────────
   Mêmes jetons que le reste, aucune couleur en dur. Ce qui est propre à cet
   écran, c'est la FRISE des échanges : une liste verticale, du plus récent au
   plus ancien, où le détail dicté est le texte qui compte. */

.opp-objet {
  margin: 0.3rem 0 0; color: var(--encre-douce); font-size: 1.05rem;
}

.opp-tete { margin: 1.5rem 0; }
.opp-chiffres {
  display: flex; flex-wrap: wrap; gap: 2rem;
  padding: 1rem 1.25rem;
  background: var(--surface-creuse);
  border: 1px solid var(--trait); border-radius: 6px;
}
.opp-chiffres dt {
  font-size: 0.8rem; color: var(--encre-tenue);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.opp-chiffres dd { margin: 0.15rem 0 0; color: var(--titre); font-size: 1.05rem; }

.opp-liens { display: flex; gap: 1rem; margin: 0.8rem 0 0; flex-wrap: wrap; }

.fiche-proposition {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.85rem; font-weight: 600;
  color: var(--accent-texte); text-decoration: none;
}
.fiche-proposition:hover { text-decoration: underline; }

/* Le lien sur le nom de l'école, dans la carte du tableau. Il ne doit pas se
   lire comme un lien : la carte reste une carte, et souligner le nom la
   ferait paraître cliquable partout. */
a.fiche-ecole { color: inherit; text-decoration: none; }
a.fiche-ecole:hover { text-decoration: underline; }

.opp-suite {
  margin: 1.25rem 0; padding: 0.9rem 1.1rem;
  background: var(--accent-clair); border-left: 3px solid var(--accent-trait);
  border-radius: 6px; color: var(--encre-douce);
}
.opp-suite h2 {
  font-size: 0.9rem; margin: 0 0 0.4rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.opp-suite p { margin: 0.2rem 0; }

.opp-histoire { margin: 2rem 0 3rem; }
.echanges { list-style: none; margin: 0; padding: 0; }
.echange {
  padding: 0.8rem 0 0.8rem 1rem;
  border-left: 2px solid var(--trait-fort);
}
.echange + .echange { border-top: 1px solid var(--trait); }
.echange-tete {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 0;
}
.echange-date {
  color: var(--titre); font-variant-numeric: tabular-nums; font-weight: 600;
}
.echange-type { color: var(--encre-douce); font-size: 0.9rem; }
.echange-resultat {
  font-size: 0.8rem; color: var(--encre-tenue);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--trait-fort); border-radius: 999px;
}
/* Le détail dicté. C'est le texte de Chris, et c'est lui qui rend une relance
   pertinente : il a la même taille que le corps, pas celle d'une annotation. */
.echange-detail {
  margin: 0.35rem 0 0; color: var(--encre); max-width: 46rem;
}

/* ── Noter un échange depuis la page d'une affaire ───────────────────────── */

/* Replié : l'écran sert d'abord à LIRE — c'est ce qu'on vient chercher avant de
   décrocher son téléphone. Un formulaire déployé en tête ferait de la saisie
   l'objet de la page. */
.opp-noter { margin: 1.5rem 0; }
.opp-noter summary {
  cursor: pointer; font-size: 0.9rem; font-weight: 600;
  color: var(--accent-texte);
}
.opp-noter form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
  margin-top: 0.8rem; padding: 0.9rem 1.1rem;
  background: var(--surface-creuse);
  border: 1px solid var(--trait); border-radius: 6px;
}
.opp-noter label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem; color: var(--encre-tenue);
}
.opp-noter select, .opp-noter textarea {
  padding: 0.35rem 0.45rem; font-size: 0.95rem;
  font-family: inherit;
  color: var(--encre); background: var(--surface);
  border: 1px solid var(--trait-fort); border-radius: 4px;
}
/* Le détail prend toute la largeur : c'est le champ qui compte, et c'est lui
   qu'on relira avant de rappeler. */
.opp-noter .opp-detail { flex: 0 0 100%; }
.opp-noter textarea { width: 100%; resize: vertical; }
.opp-noter-note {
  flex: 0 0 100%; margin: 0.2rem 0 0;
  font-size: 0.8rem; color: var(--encre-tenue);
}

/* Une affaire close : le refus est dit, et le chemin donné. */
.opp-close {
  margin: 1.5rem 0; padding: 0.9rem 1.1rem;
  background: var(--surface-creuse); border-left: 3px solid var(--trait-fort);
  border-radius: 6px; color: var(--encre-douce); max-width: 46rem;
}

/* --- Prospection ----------------------------------------------------- */

/* Le module NOMME l'affaire : c'est lui qui la rend désignable dans une phrase,
   et il doit se lire avant l'école, qui se répète d'une carte à l'autre. */
.fiche-module { font-weight: 600; }

.issue-module { color: var(--encre-douce); }

.fiche-echeance-quoi { color: var(--encre-tenue); font-size: 0.85rem; }