/* ============================================================
   v4/prospects-file.css — Prospects · vue File d'appel (maquette 03)

   Barre d'outils (recherche, bascule de vues, tri) puis deux
   cartes-canaux côte à côte, reprises au pixel de la maquette :
   lavis de fond par canal, tuile d'icône sur panneau opaque, kicker
   en capitales, grand chiffre tabulaire, texte d'explication, CTA.

   Les jetons --wash-tel / --src-tel / --wash-seo / --src-seo de la
   maquette n'existent pas dans tokens-v2.css : ils sont reconstruits
   ici, portée .x4-prospects-file uniquement. MESURES maquette
   (atlas 02, 01/09/2026) : le canal téléphone est AMBRE (encre
   #8d7526, lavis rgb(253,252,246) = accent-bright 5 % sur blanc),
   le canal entrantes est VIOLET (encre #6f5fb0, lavis
   rgb(244,242,251) = alt-fg 7 % sur blanc) — pas info/pos comme
   d'abord supposé. Les encres passent par les jetons contrastés du
   CRM (--v2-accent, --alt-fg : encres maquette assombries de 4 à
   14 %, décision Claude Design 07/08/2026, tokens-v2.css). color-mix
   sur des jetons qui basculent déjà : les deux thèmes suivent seuls.
   ============================================================ */

.x4-prospects-file {
  --x4-prospects-file-src-tel: var(--v2-accent, #7d640d);
  --x4-prospects-file-src-seo: var(--alt-fg, #664cc2);
  --x4-prospects-file-wash-tel: color-mix(in srgb, var(--accent-bright, #f5d547) 5%, var(--panel-solid, #fff));
  --x4-prospects-file-wash-seo: color-mix(in srgb, var(--alt-fg, #664cc2) 7%, var(--panel-solid, #fff));
  --x4-prospects-file-src-mail: var(--info-fg, #3160b4);
  --x4-prospects-file-wash-mail: color-mix(in srgb, var(--info-fg, #3160b4) 6%, var(--panel-solid, #fff));
  /* Le parent #kanban-container (v2-coque.css) pose déjà 20px 30px :
     on ne garde que le complément bas de la maquette (86 − 20 = 66)
     pour retrouver l'encart mesuré 20 / 30 / 86 sans le doubler. */
  padding: 0 0 66px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font, 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  color: var(--v2-text, var(--v2-text, #16171a));
}

/* [hidden] doit rester masqué, même si un display flex/grid traîne. */
.x4-prospects-file [hidden] { display: none !important; }

/* ── Barre d'outils (mesures maquette : 50 px, rayon 18, verre) ──
   Même barre que les vues Pipeline et Campagnes : recherche,
   bascule de vues, « Gérer les champs », rappel du tri à droite. */
.x4-prospects-file-barre {
  box-sizing: border-box; /* 50 px bord compris, même hors du reset global */
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 6px 0 16px;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255, 255, 255, 0.66));
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.x4-prospects-file-loupe {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--v2-text-3, #6b6f76);
}
.x4-prospects-file-cherche {
  margin-left: 9px;
  width: 210px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--v2-text, #16171a);
  background: transparent;
  border: 0;
}
.x4-prospects-file-cherche::placeholder { color: var(--v2-text-3, #6b6f76); }
.x4-prospects-file-cherche:focus { outline: none; }
.x4-prospects-file-cherche::-webkit-search-cancel-button { -webkit-appearance: none; }

.x4-prospects-file-sep {
  width: 1px;
  height: 22px;
  background: var(--stroke-2, rgba(20, 20, 25, 0.05));
  margin: 0 14px 0 4px;
  flex-shrink: 0;
}
.x4-prospects-file-sep-2 { margin: 0 14px; }

.x4-prospects-file-bascule {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  flex-shrink: 0;
}
.x4-prospects-file-onglet {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 13px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2, #55595f);
  background: transparent;
}
.x4-prospects-file-onglet:hover { color: var(--v2-text, #16171a); }
.x4-prospects-file-onglet-actif,
.x4-prospects-file-onglet-actif:hover {
  color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, 0.26));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.x4-prospects-file-champs {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  flex-shrink: 0;
}
.x4-prospects-file-champs:hover { background: var(--inset, rgba(0, 0, 0, 0.035)); }

.x4-prospects-file-flex { flex: 1 1 0%; }

/* Rappel du tri (droite de la barre) : un constat, pas un bouton —
   la file est réellement triée par statut puis prochaine action. */
.x4-prospects-file-tri {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  flex-shrink: 0;
}
.x4-prospects-file-tri-cle {
  font-weight: 620;
  color: var(--v2-text, #16171a);
}

/* ── La planche : deux modules côte à côte (maquette : 1fr 1fr, 14px) ── */
.x4-prospects-file-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 30px;
}

/* ── La carte-canal ──────────────────────────────────────────── */
.x4-prospects-file-carte {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--panel, rgba(255, 255, 255, 0.66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, 0.075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, 0.03), 0 10px 30px -12px rgba(0, 0, 0, 0.14));
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Lavis par canal — repli : panneau de verre si color-mix inconnu. */
@supports (color: color-mix(in srgb, red 10%, white)) {
  .x4-prospects-file-carte-tel { background: var(--x4-prospects-file-wash-tel); }
  .x4-prospects-file-carte-seo { background: var(--x4-prospects-file-wash-seo); }
  .x4-prospects-file-carte-mail { background: var(--x4-prospects-file-wash-mail); }
}

/* Seule la carte-bouton (flux réel) invite au clic. */
button.x4-prospects-file-carte {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button.x4-prospects-file-carte:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, 0.03), 0 10px 30px -12px rgba(0, 0, 0, 0.14)),
    0 0 0 1px var(--stroke, rgba(20, 20, 25, 0.075));
}

/* ── Tuile d'icône : 44 px sur panneau opaque, encre du canal ── */
.x4-prospects-file-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm, 12px);
  background: var(--panel-solid, #fff);
  display: grid;
  place-items: center;
}
.x4-prospects-file-carte-tel .x4-prospects-file-ico { color: var(--x4-prospects-file-src-tel, #3160b4); }
.x4-prospects-file-carte-seo .x4-prospects-file-ico { color: var(--x4-prospects-file-src-seo, #136d45); }
.x4-prospects-file-carte-mail .x4-prospects-file-ico { color: var(--x4-prospects-file-src-mail, #3160b4); }

/* ── Kicker + titre ──────────────────────────────────────────── */
.x4-prospects-file-tete { display: block; }
.x4-prospects-file-kicker {
  display: block;
  font-size: 9.5px;
  font-weight: 680;
  letter-spacing: 0.1em;
  line-height: 1.15; /* mesure maquette : 11 px, pas l'interligne hérité (13 px) */
  text-transform: uppercase;
}
.x4-prospects-file-carte-tel .x4-prospects-file-kicker { color: var(--x4-prospects-file-src-tel, #3160b4); }
.x4-prospects-file-carte-seo .x4-prospects-file-kicker { color: var(--x4-prospects-file-src-seo, #136d45); }
.x4-prospects-file-carte-mail .x4-prospects-file-kicker { color: var(--x4-prospects-file-src-mail, #3160b4); }
.x4-prospects-file-titre {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display, 'Archivo', 'Manrope', system-ui, sans-serif);
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* ── Le grand chiffre, dérivé des fiches réelles ─────────────── */
.x4-prospects-file-chiffre {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.x4-prospects-file-nombre {
  font-family: var(--font-display, 'Archivo', 'Manrope', system-ui, sans-serif);
  font-size: 40px;
  font-weight: 680;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Pas de donnée = tiret, jamais 0 : le tiret prend l'encre discrète. */
.x4-prospects-file-nombre-vide { color: var(--v2-text-3, var(--v2-text-3, #6b6f76)); }
.x4-prospects-file-nombre-lbl {
  font-size: 13px;
  line-height: 1.15; /* mesure maquette : 15 px, pas 18 */
  color: var(--v2-text-3, var(--v2-text-3, #6b6f76));
}

/* ── Texte d'explication (copie de la maquette) ──────────────── */
.x4-prospects-file-texte {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  /* Encre : la maquette mesure #64686e, le --v2-text-2 du handoff ;
     le CRM l'a assombri à #55595f pour le contraste (tokens-v2.css,
     07/08/2026, « ne pas rétablir ») — on garde le jeton. */
  color: var(--v2-text-2, var(--v2-text-2, #55595f));
  text-wrap: pretty;
  max-width: 344px; /* mesure maquette (42ch tombait à 333 px) */
}

/* ── CTA « Commencer les appels » (uniquement si flux) ───────── */
.x4-prospects-file-cta {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.2; /* mesure maquette : 15 px, pas 18 */
  color: var(--v2-text, var(--v2-text, #16171a));
}

/* ── États vides : dire quoi faire, pas de chiffre inventé ───── */
.x4-prospects-file-etat-vide {
  display: block;
  background: var(--inset, rgba(0, 0, 0, 0.035));
  border-radius: var(--r-sm, 12px);
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-2, var(--v2-text-2, #55595f));
  max-width: 42ch;
}
.x4-prospects-file-vide {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-3, var(--v2-text-3, #6b6f76));
}

/* « + Nouvelle fiche » (09/09/2026) : le bouton plein, en ambre. */
.x4-prospects-file-champs.est-ambre { background: var(--accent-bright, #f5d547); border-color: transparent; color: var(--sur-accent, #1b1a12); font-weight: 640; margin-left: 8px; }
.x4-prospects-file-champs.est-ambre:hover { filter: brightness(.97); color: var(--sur-accent, #1b1a12); }

/* Trois modules (17/09/2026) : phoning, demandes entrantes, campagne e-mail. */
.x4-prospects-file-grille.est-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x4-prospects-file-grille.est-trois .x4-prospects-file-carte { padding: 24px 24px 26px; }
@media (max-width: 1180px) { .x4-prospects-file-grille.est-trois { grid-template-columns: 1fr 1fr; } }