/* ==========================================================================
   Interface v2 — fiche entreprise (refonte UX 25/08/2026, branche refonte-ux)
   ==========================================================================
   Compagnon de ui-v2-fiche.js. Tout est scopé html.ui-v2 + préfixe v2f- :
   sans le drapeau "sobria-ui-v2", ce fichier ne change rien à l'interface.
   À lier dans index.html APRÈS ui-v2.css.

   Règles du cahier §8 : cartes blanches radius 12 bordées de
   var(--v2-bordure-douce) ; boutons/champs radius 8 ; badges radius 4 ;
   grille de 8 points ; cibles 44 px ; UNE seule action primaire cuivre par
   écran (ici : la « Prochaine action » du Résumé).
   ========================================================================== */

/* ------------------------------------------------------------- en-tête */
html.ui-v2 .v2f-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2f-retour {
  display: inline-block;
  font-size: 13px;
  color: var(--texte-attenue);
  text-decoration: none;
  margin-bottom: 8px;
}
html.ui-v2 .v2f-retour:hover { color: var(--sobria-cuivre); }
html.ui-v2 .v2f-titre-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
html.ui-v2 .v2f-nom {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
  margin: 0;
}
html.ui-v2 .v2f-sous-titre {
  font-size: 13px;
  color: var(--texte-attenue);
  margin-top: 4px;
}
html.ui-v2 .v2f-ville { text-transform: uppercase; letter-spacing: .04em; }

/* Badges des deux axes — radius 4 (cahier §8), pastel, cliquables. */
html.ui-v2 .v2f-badges { display: inline-flex; gap: 8px; flex-wrap: wrap; }
html.ui-v2 .v2f-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  padding: 3px 8px;
  min-height: 24px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
html.ui-v2 button.v2f-axe-cliquable { cursor: pointer; font-family: inherit; }
html.ui-v2 button.v2f-axe-cliquable:hover { filter: brightness(.96); }

html.ui-v2 .v2f-badge.sc-prospect      { background: #e8eef7; color: #2b4a7a; border-color: #ccd9ec; }
html.ui-v2 .v2f-badge.sc-opportunite   { background: #f6e8d9; color: #8a4d1a; border-color: #ecd4ba; }
html.ui-v2 .v2f-badge.sc-client        { background: #e2f0e6; color: #1e6b3f; border-color: #c5e0cf; }
html.ui-v2 .v2f-badge.sc-ancien_client { background: #eceae3; color: #6b675a; border-color: #dcd7c9; }
html.ui-v2 .v2f-badge.tr-sobria_direct { background: #e7eaf2; color: #2c3a5c; border-color: #d2d8e6; }
html.ui-v2 .v2f-badge.tr-apporteur     { background: #f2e7f1; color: #7c3a72; border-color: #e4cfe1; }
html.ui-v2 .v2f-badge.tr-partenaire_mb { background: #eef2e2; color: #55672a; border-color: #dbe3c6; }

/* Troisième axe : l'étape du pipeline (01/09/2026). Les teintes reprennent les
   liserés de colonne du kanban (V2P_COULEURS, ui-v2-pipeline.js) en pastel : le
   badge de la fiche et la colonne du kanban doivent se reconnaître d'un écran à
   l'autre. « et-vide » = aucune affaire, volontairement incolore et en pointillé
   — c'est une invitation à classer, pas une sixième étape. */
html.ui-v2 .v2f-badge.et-nouveau { background: #e6ecf6; color: #2f5fa8; border-color: #ccd9ec; }
html.ui-v2 .v2f-badge.et-analyse { background: #f9efdc; color: #8a6415; border-color: #ecdcba; }
html.ui-v2 .v2f-badge.et-offre   { background: #f0e8f6; color: #6d3f92; border-color: #ddcdea; }
html.ui-v2 .v2f-badge.et-signe   { background: #e2f0e6; color: #2c6b45; border-color: #c5e0cf; }
html.ui-v2 .v2f-badge.et-perdu   { background: #ecedee; color: #63696f; border-color: #d9dbde; }
html.ui-v2 .v2f-badge.et-vide {
  background: #fff;
  color: #6b675a;
  border-color: #cfcabb;
  border-style: dashed;
  font-weight: 500;
}

/* --------------------------------------------------------------- boutons */
/* Secondaire : blanc bordé. Primaire : LE cuivre — un seul par écran. */
html.ui-v2 .v2f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
html.ui-v2 .v2f-btn:hover { background: var(--fond-survol); }
html.ui-v2 .v2f-btn[disabled] { opacity: .45; cursor: not-allowed; }
html.ui-v2 .v2f-btn[disabled]:hover { background: var(--fond-surface); }

html.ui-v2 .v2f-btn-primaire,
html.ui-v2 .v2f-btn.v2f-btn-primaire {
  background: var(--sobria-cuivre);
  border-color: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2f-btn.v2f-btn-primaire:hover { background: #b06c33; border-color: #b06c33; }

html.ui-v2 .v2f-btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
html.ui-v2 .v2f-btn.v2f-danger { color: #a03328; }
html.ui-v2 .v2f-btn.v2f-danger:hover { background: #f8e9e6; border-color: #e5c4be; }

html.ui-v2 .v2f-ic { width: 18px; height: 18px; flex: none; }
html.ui-v2 .v2f-ic-16 { width: 16px; height: 16px; }
html.ui-v2 .v2f-ic-12 { width: 12px; height: 12px; }

html.ui-v2 .v2f-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Menus ancrés (Plus, badges d'axes) : la coquille pose .v2-menu en absolu
   par rapport à l'ancre — l'ancre doit donc être positionnée. */
html.ui-v2 .v2f-menu-ancre { position: relative; display: inline-flex; }
html.ui-v2 .v2f-menu-ancre .v2-menu { left: 0; right: auto; }
html.ui-v2 .v2f-ancre-plus .v2-menu { left: auto; right: 0; }
html.ui-v2 .v2-menu button.actif { font-weight: 600; }
html.ui-v2 .v2-menu .v2f-coche { margin-left: auto; color: var(--sobria-cuivre); }
html.ui-v2 .v2-menu .v2f-menu-note {
  padding: 8px 12px 6px;
  font-size: 12px;
  color: var(--texte-attenue);
  border-top: 1px solid var(--v2-bordure-douce);
  margin-top: 6px;
  max-width: 260px;
}
html.ui-v2 .v2-menu .v2f-menu-danger { color: #a03328; }

/* --------------------------------------------- bandeau fin de relation */
html.ui-v2 .v2f-bandeau-fin {
  border-left: 3px solid #a03328;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
html.ui-v2 .v2f-bandeau-fin-corps { font-size: 13.5px; }

/* --------------------------------------------------------------- onglets */
html.ui-v2 .v2f-onglets {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  margin: 16px 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
html.ui-v2 .v2f-onglets::-webkit-scrollbar { display: none; }
html.ui-v2 .v2f-onglets button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--texte-attenue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
html.ui-v2 .v2f-onglets button:hover { color: var(--texte); }
html.ui-v2 .v2f-onglets button.active {
  color: var(--sobria-nuit);
  font-weight: 600;
  border-bottom-color: var(--sobria-cuivre);
}
html.ui-v2 .v2f-compte {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--fond-survol);
  color: var(--texte-attenue);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
html.ui-v2 .v2f-onglets button.active .v2f-compte {
  background: #f6e8d9;
  color: #8a4d1a;
}

/* ---------------------------------------------------------------- cartes */
html.ui-v2 .v2f-carte {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
html.ui-v2 .v2f-carte h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0;
  text-transform: none;
}
html.ui-v2 .v2f-carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
html.ui-v2 .v2f-carte-tete h2 { margin-bottom: 12px; }

html.ui-v2 .v2f-attenue { color: var(--texte-attenue); font-size: 13px; }

html.ui-v2 .v2f-lien-pied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--cuivre-clair, #a05f27);
  text-decoration: none;
  cursor: pointer;
}
html.ui-v2 .v2f-lien-pied:hover { text-decoration: underline; }

/* ------------------------------------------------------------ états vides */
html.ui-v2 .v2f-vide {
  padding: 18px 8px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 13.5px;
}
html.ui-v2 .v2f-vide .v2f-btn { display: inline-flex; margin-top: 12px; }
html.ui-v2 .v2f-vide-compact { padding: 8px; text-align: left; }

/* ---------------------------------------------------------------- résumé */
html.ui-v2 .v2f-resume {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1023px) {
  html.ui-v2 .v2f-resume { grid-template-columns: 1fr; }
}

/* Carte « Prochaine action » — porte LA primaire cuivre de l'écran. */
html.ui-v2 .v2f-carte-action { border-left: 3px solid var(--sobria-cuivre); }
html.ui-v2 .v2f-action-libelle {
  font-size: 16px;
  font-weight: 600;
  color: var(--texte);
  margin-bottom: 6px;
}
html.ui-v2 .v2f-action-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.ui-v2 .v2f-carte-action-boutons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

html.ui-v2 .v2f-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--fond-survol);
  color: var(--texte-attenue);
  white-space: nowrap;
}
html.ui-v2 .v2f-chip-retard { background: #f8e9e6; color: #a03328; }

/* Informations clés */
html.ui-v2 .v2f-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2f-info:first-of-type { border-top: 0; }
html.ui-v2 .v2f-info-lib { color: var(--texte-attenue); flex: none; }
html.ui-v2 .v2f-info-val { text-align: right; overflow-wrap: anywhere; }
html.ui-v2 .v2f-notes {
  border-top: 1px solid var(--v2-bordure-douce);
  padding-top: 8px;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
html.ui-v2 .v2f-notes .v2f-info-lib { display: block; margin-bottom: 4px; }

/* Contact principal */
html.ui-v2 .v2f-contact { display: flex; gap: 12px; align-items: flex-start; }
html.ui-v2 .v2f-contact-nom { font-weight: 600; font-size: 14px; }
html.ui-v2 .v2f-contact-canal { font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }

/* Opportunité */
html.ui-v2 .v2f-opp-titre { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
html.ui-v2 .v2f-opp-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
html.ui-v2 .v2f-montant { font-weight: 600; font-size: 13.5px; white-space: nowrap; }

/* --------------------------------------------------- chronologie unifiée */
html.ui-v2 .v2f-evenement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2f-evenement:first-of-type { border-top: 0; }
html.ui-v2 .v2f-evenement.fait { opacity: .6; }
html.ui-v2 .v2f-evenement-corps { flex: 1; min-width: 0; }
html.ui-v2 .v2f-evenement-titre {
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2f-evenement-titre a { color: var(--cuivre-clair, #a05f27); }
html.ui-v2 .v2f-evenement-sous {
  font-size: 12.5px;
  color: var(--texte-attenue);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2f-evenement-date {
  font-size: 12.5px;
  color: var(--texte-attenue);
  white-space: nowrap;
  flex: none;
  padding-top: 2px;
}

/* Pastilles d'icônes, colorées par famille d'événement. */
html.ui-v2 .v2f-pastille {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--fond-survol);
  color: var(--texte-attenue);
}
html.ui-v2 .v2f-pastille.p-note          { background: #edece6; color: #5d5a4e; }
html.ui-v2 .v2f-pastille.p-appel         { background: #e2f0e6; color: #1e6b3f; }
html.ui-v2 .v2f-pastille.p-email         { background: #e8eef7; color: #2b4a7a; }
html.ui-v2 .v2f-pastille.p-rdv           { background: #ece7f5; color: #5b4a9c; }
html.ui-v2 .v2f-pastille.p-tache         { background: #f6e8d9; color: #8a4d1a; }
html.ui-v2 .v2f-pastille.p-questionnaire { background: #e3f0ef; color: #226b64; }
html.ui-v2 .v2f-pastille.p-message       { background: #e3f0ef; color: #226b64; }
html.ui-v2 .v2f-pastille.p-document      { background: #efe9dc; color: #7a6335; }
html.ui-v2 .v2f-pastille.p-devis         { background: #f6e8d9; color: #8a4d1a; }
html.ui-v2 .v2f-pastille.p-mandat        { background: #e7eaf2; color: #2c3a5c; }
html.ui-v2 .v2f-pastille.p-etape         { background: #e2f0e6; color: #1e6b3f; }
html.ui-v2 .v2f-pastille.p-elec          { background: #f7f0d9; color: #8a6d1a; }
html.ui-v2 .v2f-pastille.p-gaz           { background: #fbe9e2; color: #b3502a; }
html.ui-v2 .v2f-pastille.p-site          { background: #e7eaf2; color: #2c3a5c; }
html.ui-v2 .v2f-pastille.p-utilisateur   { background: #e7eaf2; color: #2c3a5c; }

/* Filtres de la chronologie */
html.ui-v2 .v2f-filtres {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2f-filtre {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 999px;
  background: var(--fond-surface);
  color: var(--texte-attenue);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
html.ui-v2 .v2f-filtre:hover { background: var(--fond-survol); }
html.ui-v2 .v2f-filtre.active {
  background: var(--sobria-nuit);
  border-color: var(--sobria-nuit);
  color: #fff;
}

/* Formulaire d'activité */
html.ui-v2 .v2f-form-activite-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
html.ui-v2 .v2f-form-activite select,
html.ui-v2 .v2f-form-activite input[type="date"],
html.ui-v2 .v2f-form-activite input[type="time"] {
  min-height: 40px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface-2);
  color: var(--texte);
  padding: 0 10px;
  font-size: 14px;
  font-family: inherit;
  width: auto;
}
html.ui-v2 .v2f-form-activite textarea {
  width: 100%;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface-2);
  color: var(--texte);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
html.ui-v2 .v2f-form-activite-pied {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------- listes et lignes */
html.ui-v2 .v2f-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-bordure-douce);
  flex-wrap: wrap;
}
html.ui-v2 .v2f-ligne:first-of-type { border-top: 0; }
html.ui-v2 .v2f-ligne-corps { flex: 1; min-width: 180px; }
html.ui-v2 .v2f-ligne-titre {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2f-ligne-titre a { color: var(--cuivre-clair, #a05f27); }
html.ui-v2 .v2f-ligne-sous {
  font-size: 12.5px;
  color: var(--texte-attenue);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
html.ui-v2 .v2f-ligne-nav { cursor: pointer; }
html.ui-v2 .v2f-ligne-nav:hover { background: var(--fond-survol); }
html.ui-v2 .v2f-affaire { cursor: pointer; }
html.ui-v2 .v2f-affaire:hover { background: var(--fond-survol); }

/* Sites & compteurs */
html.ui-v2 .v2f-site {
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
html.ui-v2 .v2f-ligne-site { flex-wrap: wrap; }
html.ui-v2 .v2f-ligne-compteur { padding-left: 12px; }

/* Le sélecteur de statut d'affaire (statutCommercialHtml, partagé avec la
   v1) : compacté pour tenir dans la ligne. */
html.ui-v2 .v2f-affaire .statut-commercial { min-width: 150px; }
html.ui-v2 .v2f-affaire .statut-commercial select {
  min-height: 32px;
  border-radius: 8px;
  font-size: 13px;
}

/* Avancement des tâches du dossier */
html.ui-v2 .v2f-progres {
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: var(--fond-survol);
  overflow: hidden;
  flex: none;
}
html.ui-v2 .v2f-progres > div { height: 100%; background: var(--sobria-cuivre); }

/* Facturation */
html.ui-v2 .v2f-barre-creation {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  html.ui-v2 .v2f-entete { flex-direction: column; align-items: stretch; }
  html.ui-v2 .v2f-nom { font-size: 24px; }

  /* Trois gros boutons Appeler / Email / Tâche en rangée (cibles ≥ 44 px),
     « Plus » en dessous, pleine largeur. */
  html.ui-v2 .v2f-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  html.ui-v2 .v2f-actions .v2f-btn { min-height: 48px; padding: 0 6px; font-size: 13px; }
  html.ui-v2 .v2f-ancre-plus { grid-column: 1 / -1; }
  html.ui-v2 .v2f-ancre-plus .v2f-btn { width: 100%; }
  html.ui-v2 .v2f-ancre-plus .v2-menu { left: 0; right: 0; }

  html.ui-v2 .v2f-carte { padding: 16px 14px; }
  html.ui-v2 .v2f-onglets { margin: 12px -12px 16px; padding: 0 12px; }
  html.ui-v2 .v2f-evenement-date { font-size: 11.5px; }
  html.ui-v2 .v2f-carte-action-boutons .v2f-btn { flex: 1; min-height: 44px; }
}