/* ==========================================================================
   Interface v2 — écrans divers : Opportunités, Santé des données,
   Mon travail, Marque blanche (refonte UX, 25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-divers.js. Tout est scopé html.ui-v2 et préfixé v2dv-
   (dv comme divers) : sans la 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, H1 PT Serif, un seul bouton primaire cuivre par écran
   (Opportunités : « + Programme » ; Santé : « Intégrer les N candidates »,
   qui n'existe qu'après l'aperçu Sirene ; Mon travail : le « + Nouveau
   prospect » v1 déménagé dans l'en-tête ; Marque blanche : l'« Enregistrer »
   du formulaire v1). La sous-navigation .subnav (ongletsProspection) est
   déjà restylée par ui-v2-prospects.css — rien à doubler ici. La peau
   v2dv-v1 en fin de fichier éclaircit les deux écrans restés en logique v1
   (Mon travail, Marque blanche).
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2dv-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.ui-v2 .v2dv-entete h1 {
  margin: 0;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2dv-sous-titre {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--texte-attenue);
  max-width: 720px;
}
html.ui-v2 .v2dv-entete-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
html.ui-v2 .v2dv-section-titre {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sobria-nuit);
}

/* ---------------------------------------------------------------- cartes */
html.ui-v2 .v2dv-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));
  padding: 16px;
  margin-bottom: 14px;
}
html.ui-v2 .v2dv-carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2dv-carte-tete h2,
html.ui-v2 .v2dv-opp-titre h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--sobria-nuit);
}

html.ui-v2 .v2dv-meta {
  font-size: 12.5px;
  color: var(--texte-attenue);
  margin: 4px 0;
}
html.ui-v2 .v2dv-lien { color: var(--cuivre-clair, #a05f27); }
html.ui-v2 .v2dv-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2dv-charge {
  padding: 40px;
  text-align: center;
  color: var(--texte-attenue);
}

/* -------------------------------------------------------------- pastilles */
html.ui-v2 .v2dv-pastille {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2dv-pastille-vert   { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2dv-pastille-ambre  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2dv-pastille-bleu   { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2dv-pastille-rouge  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2dv-pastille-neutre { background: #efeeec; color: #676d7c; }

/* ----------------------------------------------------------------- boutons */
html.ui-v2 .v2dv-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 .v2dv-btn:hover { background: #faf8f3; }
html.ui-v2 .v2dv-btn svg { width: 18px; height: 18px; flex: none; }
html.ui-v2 .v2dv-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
html.ui-v2 .v2dv-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2dv-btn-primaire:hover { background: #b06c33; }
html.ui-v2 .v2dv-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------------- champs */
html.ui-v2 .v2dv-champ,
html.ui-v2 .v2dv-select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
  font-family: inherit;
}

/* ==========================================================================
   Écran Opportunités
   ========================================================================== */
html.ui-v2 .v2dv-opp-moteur { max-width: 720px; }

html.ui-v2 .v2dv-opp-liste {
  display: flex;
  flex-direction: column;
  gap: 0;             /* les cartes portent déjà leur marge basse */
}
html.ui-v2 .v2dv-opp-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
html.ui-v2 .v2dv-opp-titre { min-width: 220px; flex: 1; }
html.ui-v2 .v2dv-opp-pastilles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
html.ui-v2 .v2dv-opp-resume {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--texte);
  line-height: 1.5;
}
/* Les trois chiffres, à la même taille, dans la même rangée : la valeur
   faciale ne domine jamais le coût net — c'est la raison d'être du module. */
html.ui-v2 .v2dv-opp-chiffres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
html.ui-v2 .v2dv-chiffre {
  flex: 1;
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
}
html.ui-v2 .v2dv-chiffre-lbl {
  display: block;
  font-size: 12px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2dv-chiffre-num {
  display: block;
  margin-top: 2px;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 20px;
  line-height: 1.1;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2dv-opp-alerte {
  margin: 10px 0 0;
  font-size: 13px;
  color: #a3392b;
}
html.ui-v2 .v2dv-opp-atrancher {
  margin: 8px 0 0;
  font-size: 13px;
  color: #9a6b1a;
}

/* Questions humaines : le texte à gauche, le select à droite, cible 44 px. */
html.ui-v2 .v2dv-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2dv-question:first-of-type { border-top: 0; }
html.ui-v2 .v2dv-question-texte {
  flex: 1;
  font-size: 13.5px;
  color: var(--texte);
  cursor: pointer;
}
html.ui-v2 .v2dv-question .v2dv-select { width: auto; }

/* ==========================================================================
   Écran Santé des données
   ========================================================================== */
html.ui-v2 .v2dv-sante-aide { margin: -6px 0 10px; }

/* La rangée de compteurs : cartes-boutons, chiffre PT Serif + libellé. */
html.ui-v2 .v2dv-compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
html.ui-v2 .v2dv-compteur {
  display: block;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  background: var(--fond-surface, #fff);
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
}
html.ui-v2 .v2dv-compteur:hover:not([disabled]) { background: #faf8f3; }
html.ui-v2 .v2dv-compteur[disabled] { cursor: default; box-shadow: none; }
html.ui-v2 .v2dv-compteur.v2dv-ouvert { border-color: var(--sobria-cuivre); }
html.ui-v2 .v2dv-compteur-num {
  display: block;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2dv-compteur-num.v2dv-zero { color: var(--texte-attenue); }
html.ui-v2 .v2dv-compteur-lbl {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2dv-sante-detail:empty { display: none; }

/* Deux cartes côte à côte (échéances, Sirene) ; une colonne sur écran étroit. */
html.ui-v2 .v2dv-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
html.ui-v2 .v2dv-colonnes .v2dv-carte { margin-bottom: 0; }
@media (max-width: 900px) {
  html.ui-v2 .v2dv-colonnes { grid-template-columns: 1fr; }
}

/* Listes de lignes (détails, échéances, exports). */
html.ui-v2 .v2dv-liste { margin-top: 4px; }
html.ui-v2 .v2dv-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--v2-bordure-douce);
}
html.ui-v2 .v2dv-liste .v2dv-ligne:first-child { border-top: 0; }
html.ui-v2 .v2dv-ligne-corps { flex: 1; min-width: 0; }
html.ui-v2 .v2dv-ligne-titre {
  font-size: 14px;
  font-weight: 500;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2dv-nombre {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 20px;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2dv-ligne[data-nav] { cursor: pointer; }
html.ui-v2 .v2dv-ligne[data-nav]:hover { background: rgba(20, 33, 59, .04); }
html.ui-v2 .v2dv-ligne[data-nav]:focus-visible {
  outline: 2px solid var(--sobria-cuivre);
  outline-offset: 2px;
}

/* Édition d'adresse sur place (les deux compteurs d'adresse). */
html.ui-v2 .v2dv-adr { flex-wrap: wrap; }
html.ui-v2 .v2dv-adr-nom { min-width: 200px; flex: 1; }
html.ui-v2 .v2dv-adr-adresse { flex: 2; min-width: 220px; }
html.ui-v2 .v2dv-adr-cp { width: 90px; }
html.ui-v2 .v2dv-adr-ville { width: 150px; }

html.ui-v2 .v2dv-sirene-actions { margin-top: 8px; }
html.ui-v2 .v2dv-sirene-actions:empty { display: none; }

/* ==========================================================================
   Peau v2dv-v1 — restyle LÉGER des deux écrans restés en logique v1
   (Mon travail, Marque blanche). Les variables inversées de la peau de
   compatibilité (ui-v2.css) rendent déjà ces écrans clairs ; ici on aligne
   seulement cartes, tuiles, lignes, champs et boutons sur le dessin v2 —
   la logique et la structure v1 ne bougent pas.
   ========================================================================== */
html.ui-v2 #main.v2dv-v1 .card {
  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));
}
html.ui-v2 #main.v2dv-v1 .card h2 { color: var(--sobria-nuit); font-size: 16px; }

/* Tuiles de chiffres (Mon travail) : chiffre PT Serif nuit, variantes en
   teintes lisibles sur blanc — les jetons de fond sombre tombent sous
   4,5:1 sur une carte claire (mesure du 07/08). */
html.ui-v2 #main.v2dv-v1 .stat-card {
  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));
}
html.ui-v2 #main.v2dv-v1 .stat-card .num {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-weight: 400;
  color: var(--sobria-nuit);
}
html.ui-v2 #main.v2dv-v1 .stat-card.accent .num { color: #a05f27; }
html.ui-v2 #main.v2dv-v1 .stat-card.danger .num { color: #a3392b; }
html.ui-v2 #main.v2dv-v1 .stat-card.warn .num { color: #9a6b1a; }

/* Le survol v1 (blanc translucide) est invisible sur fond blanc. */
html.ui-v2 #main.v2dv-v1 .list-row:hover { background: rgba(20, 33, 59, .04); }
html.ui-v2 #main.v2dv-v1 .empty { color: var(--texte-attenue); }
html.ui-v2 #main.v2dv-v1 .error { color: #a3392b; }

html.ui-v2 #main.v2dv-v1 .btn {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--v2-bordure-douce);
  background: var(--fond-surface, #fff);
  color: var(--texte);
}
html.ui-v2 #main.v2dv-v1 .btn:hover { background: #faf8f3; }
html.ui-v2 #main.v2dv-v1 .btn-primary,
html.ui-v2 #main.v2dv-v1 .btn.v2dv-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 #main.v2dv-v1 .btn-primary:hover,
html.ui-v2 #main.v2dv-v1 .btn.v2dv-btn-primaire:hover { background: #b06c33; }
html.ui-v2 #main.v2dv-v1 .btn-danger:hover {
  color: #a3392b;
  border-color: #a3392b;
  background: #fbeeec;
}

/* Champs des formulaires v1 (Marque blanche). type=file garde son habit
   natif ; les cases et boutons radio gardent leur taille. */
html.ui-v2 #main.v2dv-v1 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.ui-v2 #main.v2dv-v1 select,
html.ui-v2 #main.v2dv-v1 textarea {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
}