/* ==========================================================================
   Interface v2 — écrans « Statistiques », « Statistiques > Prospection »
   et « Carte de France » (refonte UX 25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-stats.js. Tout est scopé html.ui-v2 et préfixé v2s-
   (s comme statistiques) : sans la coquille v2, ce fichier ne change RIEN.
   Jetons de design-tokens.css (thème clair posé par la coquille) et
   variables de ui-v2.css (--v2-bordure-douce). Règles du cahier : cartes
   blanches radius 12, boutons/champs radius 8, pastilles radius 4, grille
   8 pt, cibles 44 px, un seul bouton primaire cuivre par écran, H1 PT Serif.

   Le SVG de la carte de France garde ses classes et couleurs v1
   (france-shape, map-dot, map-prospect — style.css) : ici on ne touche
   qu'au cadre autour, jamais à la carte elle-même. Les graphiques pf-chart
   de l'écran Prospection gardent leur markup v1 ; seules leurs couleurs de
   thème sombre (bordures, libellés) sont adoucies pour le fond blanc.
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2s-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2s-entete h1 {
  margin: 0;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
}

/* ------------------------------------------ onglets Vue d'ensemble | Prospection */
/* Actif = nuit, jamais cuivre : le seul primaire cuivre de l'écran reste
   « Enregistrer la journée ». */
html.ui-v2 .v2s-onglets {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2s-onglet {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 22px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
html.ui-v2 .v2s-onglet:hover { background: #faf8f3; }
html.ui-v2 .v2s-onglet-actif {
  background: var(--sobria-nuit);
  border-color: var(--sobria-nuit);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2s-onglet-actif:hover { background: var(--sobria-nuit); }

/* --------------------------------------------------------------- cartes */
html.ui-v2 .v2s-carte {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 59, .04);
  padding: 24px;
  margin-bottom: 16px;
  min-width: 0;
}
html.ui-v2 .v2s-carte h2 {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin: 0 0 12px;
}
html.ui-v2 .v2s-carte .v2s-h2-suite { margin-top: 24px; }
html.ui-v2 .v2s-titre-section {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin: 24px 0 12px;
}
html.ui-v2 .v2s-pied-carte {
  border-top: 1px solid var(--v2-bordure-douce);
  margin: 16px 0 0;
  padding-top: 12px;
}

/* -------------------------------------------------------- rangées de KPI */
html.ui-v2 .v2s-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px 24px;
}
html.ui-v2 .v2s-kpi { min-width: 0; }
html.ui-v2 .v2s-kpi-num {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--sobria-nuit);
  line-height: 1.2;
}
html.ui-v2 .v2s-kpi-accent .v2s-kpi-num { color: var(--sobria-cuivre); }
html.ui-v2 .v2s-kpi-lbl {
  font-size: 12px;
  color: var(--texte-attenue);
  margin-top: 2px;
}
/* Lignes d'évolution rendues par _prosEvo (v1) : classe .lbl conservée. */
html.ui-v2 .v2s-kpi .lbl {
  font-size: 12px;
  color: var(--texte-attenue);
  margin-top: 4px;
}
/* Variante « tuiles » : les 4 KPI de tête de l'écran Prospection vivent
   hors carte, chacun devient sa propre carte blanche. */
html.ui-v2 .v2s-kpis-cartes {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 16px;
}
/* Cinq cartes quand la ligne porte aussi le résultat (rendez-vous obtenus,
   02/09/2026) : l'effort et ce qu'il rapporte se lisent d'un seul regard. */
html.ui-v2 .v2s-kpis-cartes.v2s-kpis-cinq { grid-template-columns: repeat(5, 1fr); }
/* Entre 1024 et 1279 px, cinq colonnes font 114 px par tuile : trois, puis
   deux — plutôt que cinq colonnes illisibles ou une cinquième orpheline. */
@media (max-width: 1279px) {
  html.ui-v2 .v2s-kpis-cartes.v2s-kpis-cinq { grid-template-columns: repeat(3, 1fr); }
}
/* Le champ du résultat se distingue des trois canaux d'un liseré cuivre :
   on saisit un effort ET ce qu'il a rapporté, pas un quatrième canal.
   Deux classes dans le sélecteur : la règle générique des champs, écrite
   plus bas, redéfinit `border` et effacerait un simple `.v2s-champ-resultat`. */
html.ui-v2 .v2s-champ.v2s-champ-resultat input { border-left: 3px solid var(--sobria-cuivre); }
html.ui-v2 .v2s-kpis-cartes .v2s-kpi {
  background: var(--fond-surface);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 59, .04);
  padding: 20px 24px;
}
html.ui-v2 .v2s-kpis-suite { margin-top: 16px; }

/* ----------------------------------------------------------------- texte */
html.ui-v2 .v2s-meta { font-size: 12.5px; color: var(--texte-attenue); }
html.ui-v2 p.v2s-meta { margin: 4px 0; }
html.ui-v2 .v2s-chapo { max-width: 74ch; margin: 0 0 14px; }
html.ui-v2 .v2s-sous-frise { margin: 2px 0 10px; }
html.ui-v2 .v2s-sous-periode { margin: -6px 0 12px; }
html.ui-v2 .v2s-lien {
  color: var(--cuivre-clair, #a05f27);
  font-weight: 600;
  text-decoration: none;
}
html.ui-v2 .v2s-lien:hover { text-decoration: underline; }
html.ui-v2 .v2s-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2s-chargement {
  padding: 40px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}

/* --------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran ; les autres restent blancs bordés. */
html.ui-v2 .v2s-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 .v2s-btn:hover { background: #faf8f3; }
html.ui-v2 .v2s-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2s-btn-primaire:hover { background: #b06c33; }
html.ui-v2 .v2s-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* Boutons-icônes de l'historique (corriger / supprimer) : SVG, jamais
   d'emoji ; l'intitulé est porté par aria-label et title. */
html.ui-v2 .v2s-btn-icone {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte-attenue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.ui-v2 .v2s-btn-icone:hover { background: #faf8f3; color: var(--texte); }
html.ui-v2 .v2s-btn-icone svg { width: 16px; height: 16px; }
html.ui-v2 .v2s-btn-icone.v2s-danger { color: #a3392b; }
html.ui-v2 .v2s-btn-icone.v2s-danger:hover { background: #fbeeec; border-color: #d8b6b0; }
html.ui-v2 .v2s-cell-actions { white-space: nowrap; }
html.ui-v2 .v2s-cell-actions .v2s-btn-icone + .v2s-btn-icone { margin-left: 6px; }

html.ui-v2 .v2s-btn:focus-visible,
html.ui-v2 .v2s-btn-icone:focus-visible,
html.ui-v2 .v2s-onglet:focus-visible,
html.ui-v2 .v2s-pilule:focus-visible {
  outline: 2px solid var(--focus-couleur, var(--sobria-cuivre));
  outline-offset: 2px;
}

/* ------------------------------------------------------ formulaire du jour */
html.ui-v2 .v2s-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
html.ui-v2 .v2s-champ label {
  display: block;
  font-size: 12px;
  color: var(--texte-attenue);
  margin-bottom: 4px;
}
html.ui-v2 .v2s-champ input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
}
html.ui-v2 .v2s-champ input[type="number"] { width: 120px; }

/* ------------------------------------------------ période : sélecteur */
html.ui-v2 .v2s-sous-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
html.ui-v2 .v2s-sous-entete h2 {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--sobria-nuit);
  margin: 0;
}
html.ui-v2 .v2s-outils {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html.ui-v2 .v2s-select {
  width: auto;
  max-width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
}
html.ui-v2 .v2s-perso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html.ui-v2 .v2s-perso input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
}

/* ----------------------------------------------- rangées de liste (cartes) */
html.ui-v2 .v2s-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2s-ligne:first-of-type { border-top: 0; }
/* Une rangée qui suit directement un titre de section n'a pas besoin de
   filet : le titre sépare déjà. */
html.ui-v2 .v2s-carte h2 + .v2s-ligne { border-top: 0; }
html.ui-v2 .v2s-ligne-grandit { flex: 1; min-width: 0; }
html.ui-v2 .v2s-ligne-titre {
  font-size: 14px;
  font-weight: 600;
  color: var(--texte);
  overflow-wrap: anywhere;
}
html.ui-v2 .v2s-ligne-lib { width: 90px; font-size: 13.5px; color: var(--texte); }
html.ui-v2 .v2s-ligne-val { width: 110px; text-align: right; white-space: nowrap; }

/* Jauge de répartition des canaux : piste claire, remplissage cuivre. */
html.ui-v2 .v2s-jauge {
  background: var(--fond-survol, #efeade);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
html.ui-v2 .v2s-jauge-rempli {
  background: var(--sobria-cuivre);
  height: 10px;
  border-radius: 4px;
}

/* Entonnoir de la performance commerciale. */
html.ui-v2 .v2s-entonnoir-fleche {
  width: 26px;
  text-align: center;
  color: var(--texte-attenue);
  flex: none;
}
html.ui-v2 .v2s-entonnoir-num {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--sobria-nuit);
  white-space: nowrap;
}

/* ------------------------------------- graphiques v1 (pf-*) sur fond blanc */
/* Le markup vient de la v1 ; seules les couleurs pensées pour le thème
   sombre sont adoucies. La barre « appels » retrouve son cuivre CLAIR :
   ui-v2.css redéfinit --cuivre-clair en cuivre assombri (pour les liens),
   ce qui aurait rendu fausse la légende « clair : appels ». */
html.ui-v2 .v2s-carte .pf-label { color: var(--texte-attenue); }
html.ui-v2 .v2s-carte .pf-col.empty .pf-bar-wrap {
  border-bottom: 1px dashed var(--v2-bordure-douce);
}
html.ui-v2 .v2s-carte .pros-bar-appels { background: #d99a66; }
html.ui-v2 .v2s-carte .pf-table th {
  color: var(--texte-attenue);
  border-bottom: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2s-carte .pf-table td { border-bottom: 1px solid var(--v2-bordure-douce); }
html.ui-v2 .v2s-carte .pf-table tbody tr:hover { background: var(--fond-survol, #efeade); }

/* ------------------------------------------------------ carte de France */
/* Filtres en pilules (mêmes filtres que MAP_FILTERS v1). */
html.ui-v2 .v2s-pilules {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2s-pilule {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 22px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html.ui-v2 .v2s-pilule:hover { background: #faf8f3; }
html.ui-v2 .v2s-pilule-active {
  background: var(--sobria-nuit);
  border-color: var(--sobria-nuit);
  color: #fff;
  font-weight: 600;
}

/* La carte blanche qui porte le SVG v1 — le SVG lui-même n'est pas retouché. */
html.ui-v2 .v2s-carte-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
html.ui-v2 .v2s-carte-map .france-svg { width: 100%; max-width: 620px; height: auto; }

/* Légende : elle nomme l'encodage v1, avec les vraies classes du SVG. */
html.ui-v2 .v2s-legende {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--v2-bordure-douce);
  padding-top: 12px;
  width: 100%;
}
html.ui-v2 .v2s-legende-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--texte-attenue);
  white-space: nowrap;
}
html.ui-v2 .v2s-legende-item svg { width: 16px; height: 16px; flex: none; }
/* Les pastilles de légende ne sont pas cliquables, même si leurs classes
   (map-dot…) portent un cursor:pointer dans style.css. */
html.ui-v2 .v2s-legende svg .map-dot,
html.ui-v2 .v2s-legende svg .map-prospect { cursor: default; }
html.ui-v2 .v2s-legende-note {
  font-size: 12.5px;
  color: var(--texte-attenue);
  flex-basis: 100%;
  text-align: center;
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 1023px) {
  html.ui-v2 .v2s-kpis-cartes,
  html.ui-v2 .v2s-kpis-cartes.v2s-kpis-cinq { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  html.ui-v2 .v2s-entete h1 { font-size: 24px; }
  html.ui-v2 .v2s-kpis { grid-template-columns: repeat(2, 1fr); }
  html.ui-v2 .v2s-kpis-cartes .v2s-kpi { padding: 16px; }
  html.ui-v2 .v2s-carte { padding: 16px; }
  html.ui-v2 .v2s-form { align-items: stretch; flex-direction: column; }
  html.ui-v2 .v2s-champ input,
  html.ui-v2 .v2s-champ input[type="number"] { width: 100%; }
  html.ui-v2 .v2s-sous-entete { align-items: flex-start; flex-direction: column; }
  html.ui-v2 .v2s-ligne { flex-wrap: wrap; row-gap: 8px; }
  html.ui-v2 .v2s-ligne-val { width: auto; margin-left: auto; }
  html.ui-v2 .v2s-legende { justify-content: flex-start; }
  html.ui-v2 .v2s-legende-note { text-align: left; }
}