/* ==========================================================================
   Interface v2 — écrans « Prospects & clients » et « Contacts » (25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-prospects.js. Tout est scopé html.ui-v2 et préfixé
   v2l- (l comme liste) : sans le drapeau "sobria-ui-v2", ce fichier ne
   change RIEN. Jetons de design-tokens.css (thème clair posé par la
   coquille) ; cartes radius 12, badges radius 4, cibles 44 px, grille 8 pt.
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2l-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2l-entete h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}
html.ui-v2 .v2l-sous-titre {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2l-entete-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ----------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran ; les autres restent blancs bordés. */
html.ui-v2 .v2l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
html.ui-v2 .v2l-btn:hover { background: #faf8f3; }
html.ui-v2 .v2l-btn svg { width: 18px; height: 18px; flex: none; }
html.ui-v2 .v2l-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2l-btn-primaire:hover { background: #b06c33; }
html.ui-v2 .v2l-btn[disabled],
html.ui-v2 .v2l-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* ------------------------------------ sous-navigation d'onglets (v1 .subnav)
   Le HTML reste celui d'ongletsProspection() — seul l'habit change :
   onglets soulignés cuivre sur fond clair, cibles 44 px. */
html.ui-v2 .subnav {
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  margin-right: 22px;
  font-size: 14px;
  color: var(--texte-attenue);
  border-bottom: 2px solid transparent;
}
html.ui-v2 .subnav a:hover { color: var(--sobria-nuit); }
html.ui-v2 .subnav a.active {
  color: var(--sobria-nuit);
  font-weight: 600;
  border-bottom-color: var(--sobria-cuivre);
}

/* ------------------------------------------------------------------ filtres */
html.ui-v2 .v2l-filtres {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2l-filtres input,
html.ui-v2 .v2l-filtres select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  width: auto;
  max-width: 100%;
}
html.ui-v2 .v2l-filtres .v2l-recherche { flex: 1 1 260px; min-width: 220px; }
html.ui-v2 .v2l-filtres .v2l-departement { width: 96px; }
html.ui-v2 .v2l-filtres-secondaires { margin-bottom: 12px; }
html.ui-v2 .v2l-compteur {
  margin-left: auto;
  font-size: 13px;
  color: var(--texte-attenue);
  white-space: nowrap;
}

/* --------------------------------------------- bandeau d'actions de masse */
/* Invisible tant que rien n'est coché ; glisse en haut du tableau dès la
   première sélection. [hidden] gagne sur display:flex — le piège documenté
   du dépôt (hidden vs display) se règle ici, pas dans le JS. */
html.ui-v2 .v2l-bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--sobria-nuit);
  color: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  animation: v2l-glisser var(--duree-moyenne, 200ms) var(--courbe, ease-out);
}
html.ui-v2 .v2l-bandeau[hidden] { display: none; }
@keyframes v2l-glisser {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
html.ui-v2 .v2l-bandeau .v2l-bandeau-nb { font-weight: 600; font-size: 14px; }
html.ui-v2 .v2l-bandeau .v2l-btn {
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 13px;
}
html.ui-v2 .v2l-bandeau .v2l-btn:hover { background: rgba(255, 255, 255, .08); }
html.ui-v2 .v2l-bandeau select {
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: var(--sobria-nuit);
  color: #fff;
  font-size: 13px;
}

/* ------------------------------------------------------------------ tableau */
html.ui-v2 .v2l-carte {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
  overflow: hidden;
}
html.ui-v2 .v2l-tableau {
  width: 100%;
  border-collapse: collapse;
}
html.ui-v2 .v2l-tableau th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-attenue);
  padding: 12px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  white-space: nowrap;
}
html.ui-v2 .v2l-tableau td {
  padding: 10px 12px;
  border-top: 1px solid var(--v2-bordure-douce);
  font-size: 14px;
  vertical-align: middle;
}
html.ui-v2 .v2l-tableau tbody tr { min-height: 44px; }
html.ui-v2 .v2l-tableau tbody tr:first-child td { border-top: 0; }
html.ui-v2 .v2l-tableau tbody tr.v2l-ligne { cursor: pointer; }
html.ui-v2 .v2l-tableau tbody tr.v2l-ligne:hover { background: #faf8f3; }
html.ui-v2 .v2l-tableau tbody tr.v2l-ligne:focus-visible {
  outline: 2px solid var(--sobria-cuivre);
  outline-offset: -2px;
}
html.ui-v2 .v2l-c-check { width: 44px; padding-right: 0; }
html.ui-v2 .v2l-c-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--sobria-cuivre);
  cursor: pointer;
}
html.ui-v2 .v2l-nom {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2l-siren {
  font-size: 12px;
  color: var(--texte-attenue);
  margin-top: 1px;
}
html.ui-v2 .v2l-gardes { margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
html.ui-v2 .v2l-cellule-attenuee { color: var(--texte-attenue); }
html.ui-v2 .v2l-tableau a { color: var(--cuivre-clair, #a05f27); }

/* ------------------------------------------------------------------- badges */
html.ui-v2 .v2l-badge {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
/* Statut commercial — pastels des maquettes. */
html.ui-v2 .v2l-pastille-prospect     { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2l-pastille-opportunite  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2l-pastille-client       { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2l-pastille-ancien_client { background: #efeeec; color: #676d7c; }
/* Type de relation — badge discret, bordé, sans fond. */
html.ui-v2 .v2l-pastille-type {
  background: transparent;
  border: 1px solid var(--v2-bordure-douce);
  color: var(--texte-attenue);
  font-weight: 500;
}
/* Catégorie de prospection (26/08/2026) — la colonne « Type » des Fiches
   parle la langue du Fichier de prospection. Trois pastilles pastel, des
   TEINTES DISTINCTES des pastilles de statut commercial : « Client » (vert,
   statut) et « Client » (catégorie) côte à côte se confondraient sinon. */
html.ui-v2 .v2l-pastille-cat-client { background: #f0eefa; color: #5b4fa0; }
html.ui-v2 .v2l-pastille-cat-mb     { background: #e8f4f4; color: #2f7f7f; }
html.ui-v2 .v2l-pastille-cat-re     { background: #f9efe8; color: #a05a2c; }
/* 26/08/2026 — les deux populations de partenariat (teintes distinctes des
   trois premières ET des pastilles de statut commercial). */
html.ui-v2 .v2l-pastille-cat-be     { background: #eef7f6; color: #1f6e66; }
html.ui-v2 .v2l-pastille-cat-syndic { background: #f2effa; color: #5a4a9e; }
/* Garde-fous métier — textes clairs, jamais un pictogramme seul. */
html.ui-v2 .v2l-pastille-opposition { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2l-pastille-adresse    { background: #fdf3e3; color: #9a6b1a; }

/* ------------------------------------------------------- prochaine action */
html.ui-v2 .v2l-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--texte-attenue);
  white-space: nowrap;
}
html.ui-v2 .v2l-action svg { width: 16px; height: 16px; flex: none; }
/* #a3392b : rouge assombri lisible sur blanc — le jeton --erreur (#d37d72)
   est calibré pour les fonds sombres et ne tient pas 4,5:1 ici. */
html.ui-v2 .v2l-action.v2l-retard { color: #a3392b; font-weight: 600; }

/* --------------------------------------------------------------- pied/page */
html.ui-v2 .v2l-pied {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2l-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2l-avert {
  margin: 0 0 10px;
  font-size: 13px;
  color: #9a6b1a;
}

/* -------------------------------------------------------- panneau latéral */
html.ui-v2 .v2l-panneau {
  position: fixed;
  top: calc(var(--banniere-env-h, 0px) + var(--v2-topbar-hauteur, 64px));
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: var(--fond-surface, #fff);
  border-left: 1px solid var(--v2-bordure-douce);
  box-shadow: -12px 0 32px rgba(20, 33, 59, .12);
  transform: translateX(105%);
  transition: transform var(--duree-moyenne, 200ms) var(--courbe, ease-out);
  z-index: 70;                       /* sous les modales (100), sur le contenu */
  overflow-y: auto;
  padding: 24px;
}
html.ui-v2 .v2l-panneau.v2l-ouvert { transform: none; }
html.ui-v2 .v2l-panneau-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texte);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.ui-v2 .v2l-panneau-fermer:hover { background: var(--fond-survol, #efeade); }
html.ui-v2 .v2l-panneau-fermer svg { width: 20px; height: 20px; }
html.ui-v2 .v2l-panneau h2 {
  margin: 0 44px 2px 0;
  font-size: 20px;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  color: var(--sobria-nuit);
}
html.ui-v2 .v2l-panneau-sous {
  font-size: 13px;
  color: var(--texte-attenue);
  margin-bottom: 10px;
}
html.ui-v2 .v2l-panneau-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2l-panneau-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
html.ui-v2 .v2l-panneau-actions .v2l-btn { padding: 0 8px; font-size: 13px; }
html.ui-v2 .v2l-panneau-bloc {
  border-top: 1px solid var(--v2-bordure-douce);
  padding: 14px 0;
}
html.ui-v2 .v2l-panneau-bloc h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-attenue);
}
html.ui-v2 .v2l-panneau-bloc dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 13.5px;
}
html.ui-v2 .v2l-panneau-bloc dt { color: var(--texte-attenue); }
html.ui-v2 .v2l-panneau-bloc dd { margin: 0; color: var(--texte); overflow-wrap: anywhere; }
html.ui-v2 .v2l-panneau-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cuivre-clair, #a05f27);
  text-decoration: none;
}
html.ui-v2 .v2l-panneau-lien:hover { text-decoration: underline; }
html.ui-v2 .v2l-panneau-lien svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------- contacts */
html.ui-v2 .v2l-avatar-initiales {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sobria-creme, #F4F1E9);
  border: 1px solid var(--v2-bordure-douce);
  color: var(--sobria-nuit);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  letter-spacing: .02em;
}
html.ui-v2 .v2l-avatar-initiales.v2l-avatar-grand {
  width: 56px;
  height: 56px;
  font-size: 18px;
  margin-bottom: 10px;
}
html.ui-v2 .v2l-c-nom-contact {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --------------------- choix d'entreprise (modale « Nouveau contact ») --- */
html.ui-v2 .v2l-choix-entreprise {
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  margin: 6px 0 12px;
}
html.ui-v2 .v2l-choix-entreprise[hidden] { display: none; }
html.ui-v2 .v2l-choix-entreprise button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--texte);
  font-size: 14px;
  cursor: pointer;
}
html.ui-v2 .v2l-choix-entreprise button:hover { background: #faf8f3; }
html.ui-v2 .v2l-choix-entreprise .v2l-choix-meta {
  font-size: 12px;
  color: var(--texte-attenue);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  html.ui-v2 .v2l-entete { align-items: flex-start; flex-direction: column; }
  html.ui-v2 .v2l-compteur { margin-left: 0; }

  /* Le tableau devient des cartes empilées : nom, ville, badge statut,
     prochaine action. Les colonnes secondaires disparaissent. */
  html.ui-v2 .v2l-tableau thead { display: none; }
  html.ui-v2 .v2l-tableau,
  html.ui-v2 .v2l-tableau tbody,
  html.ui-v2 .v2l-tableau tr,
  html.ui-v2 .v2l-tableau td { display: block; }
  html.ui-v2 .v2l-tableau tbody tr {
    position: relative;
    padding: 12px 16px;
    border-top: 1px solid var(--v2-bordure-douce);
  }
  html.ui-v2 .v2l-tableau tbody tr:first-child { border-top: 0; }
  html.ui-v2 .v2l-tableau td { padding: 2px 0; border: 0; }
  html.ui-v2 .v2l-tableau tr.v2l-avec-check { padding-left: 52px; }
  html.ui-v2 .v2l-c-check {
    position: absolute;
    left: 10px;
    top: 14px;
    width: auto;
    padding: 0;
  }
  /* td.* et non .* seul : la règle générique `td { display:block }` juste
     au-dessus est plus spécifique (0,2,2) qu'une classe nue (0,2,1) — ces
     colonnes « masquées » s'affichaient quand même sur téléphone. Défaut
     trouvé par relecture croisée du module Prospection, 25/08 au soir. */
  html.ui-v2 .v2l-tableau td.v2l-c-contact,
  html.ui-v2 .v2l-tableau td.v2l-c-type,
  html.ui-v2 .v2l-tableau td.v2l-c-fonction,
  html.ui-v2 .v2l-tableau th.v2l-c-contact,
  html.ui-v2 .v2l-tableau th.v2l-c-type,
  html.ui-v2 .v2l-tableau th.v2l-c-fonction { display: none; }

  /* Le panneau devient une feuille plein écran, au-dessus de la tabbar. */
  html.ui-v2 .v2l-panneau {
    top: var(--banniere-env-h, 0px);
    width: 100vw;
    border-left: 0;
    z-index: 80;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
  html.ui-v2 .v2l-panneau-actions .v2l-btn { font-size: 12.5px; }
}

/* Bouton destructif du bandeau (Supprimer la sélection, 25/08/2026) :
   rouge bordé, jamais plein — la seule primaire du bandeau reste Appliquer. */
html.ui-v2 .v2l-btn-danger {
  color: #b3352b;
  border-color: #e4b7b2;
}
html.ui-v2 .v2l-btn-danger:hover { background: #fbeeec; }