/* prevoyance.css — Contrats de prévoyance [Chantier Prévoyance, Lot 1]
   Spécification : docs/Private/TECHNIQUE/CHANTIER-PREVOYANCE.md

   ⚠️ `.btn-primary` et `.btn-secondary` n'ont AUCUNE définition nue dans les
      feuilles chargées par cette page : general.css ne les définit que scopées
      sous `.export-upgrade-modal`, et les versions d'account.css / billing.css
      ne sont pas chargées ici. Le même piège avait laissé tous les boutons de
      analyse.html sans style. Ils sont donc définis ci-dessous, en tokens fv.
*/

/* ─── En-tête de page ──────────────────────────────────────────────────────── */

.pv-eyebrow {
  margin: 0 0 4px;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pv-intro,
.pv-note {
  margin: 0 0 16px;
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-14, 0.86rem);
  line-height: var(--fv-lh-base, 1.6);
}

.pv-note {
  margin: 12px 0 0;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
}

/* ─── Boutons ──────────────────────────────────────────────────────────────── */

.pv-liste .btn-primary,
.pv-modale .btn-primary,
.pv-liste .btn-secondary,
.pv-modale .btn-secondary,
.pv-contrat .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--fv-r-md, 10px);
  font-family: inherit;
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--fv-dur-fast, 120ms) var(--fv-ease, ease),
    border-color var(--fv-dur-fast, 120ms) var(--fv-ease, ease),
    color var(--fv-dur-fast, 120ms) var(--fv-ease, ease);
}

.pv-liste .btn-primary,
.pv-modale .btn-primary {
  background: var(--fv-primary, #2a4827);
  color: var(--fv-fg-on-brand, #fff);
}

.pv-liste .btn-primary:hover,
.pv-modale .btn-primary:hover {
  background: var(--fv-primary-hover, #35592f);
}

.pv-liste .btn-secondary,
.pv-modale .btn-secondary,
.pv-contrat .btn-secondary {
  background: var(--fv-bg-1, #fff);
  border-color: var(--fv-border-2, #ddd8cc);
  color: var(--fv-fg-1, #2b2a26);
}

.pv-liste .btn-secondary:hover,
.pv-modale .btn-secondary:hover,
.pv-contrat .btn-secondary:hover {
  border-color: var(--fv-primary, #2a4827);
  color: var(--fv-primary, #2a4827);
}

/* Sélecteur volontairement plus spécifique que `.pv-contrat .btn-secondary`
   (0,3,0 contre 0,2,0) : à spécificité ÉGALE c'est l'ordre qui tranche, et la
   règle générique est écrite avant. Le bouton resterait de la couleur
   ordinaire. */
.pv-contrat .btn-secondary.pv-btn-danger {
  border-color: #d9b6b2;
  color: #a4322a;
}

.pv-contrat .btn-secondary.pv-btn-danger:hover {
  border-color: #a4322a;
  background: #fdf2f1;
  color: #8c2a23;
}

.pv-liste .btn-primary:disabled,
.pv-modale .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Synthèse : ce qui se déclenche à chaque décès ────────────────────────── */

/* DEUX cartes par ligne, jamais quatre.
   `auto-fit` en alignait autant que la largeur le permettait : sur un écran
   large, les quatre cartes tenaient sur une seule ligne et chacune devenait
   trop étroite pour son tableau de détail.

   ⚠️ `minmax(0, 1fr)` et NON `1fr` : une piste `1fr` conserve un
   `min-width: auto` implicite, et le contenu le plus large de la carte — un
   tableau de détail, un libellé de notice sans espace — élargit alors la
   colonne au-delà du conteneur. Les deux colonnes cessent d'être égales et la
   page défile horizontalement. */
.pv-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Sous cette largeur, deux colonnes rendraient chaque carte illisible :
   on empile. */
@media (max-width: 900px) {
  .pv-cartes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ⚠️ `min-width: 0` : un element de grille garde par defaut un
   `min-width: auto` qui l'empeche de descendre sous la largeur de son contenu.
   Un libelle de notice sans espace deborderait alors de sa colonne, par-dessus
   la carte voisine. Le `minmax(0, 1fr)` regle la piste, ceci regle l'element. */
.pv-carte {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-left: 3px solid var(--fv-primary, #2a4827);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-3, #f7f6f2);
}

.pv-carte-titre {
  margin: 0 0 14px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-16, 1rem);
  font-weight: 600;
}

.pv-carte-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

.pv-carte-bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-carte-label {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pv-carte-valeur {
  font-family: var(--fv-font-num, inherit);
  font-size: var(--fv-fs-20, 1.25rem);
  font-weight: 700;
  color: var(--fv-primary, #2a4827);
}

.pv-carte-aide {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.45;
}

.pv-carte-detail {
  margin-top: 14px;
}

.pv-carte-detail > summary {
  cursor: pointer;
  color: var(--fv-link, #205a89);
  font-size: var(--fv-fs-13, 0.8rem);
}

.pv-carte-liste {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.pv-carte-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fv-border-1, #e6e2d7);
  font-size: var(--fv-fs-13, 0.8rem);
}

.pv-carte-liste li:last-child {
  border-bottom: none;
}

.pv-carte-liste-droite {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.pv-carte-liste-source {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  /* Le libelle brut d'une notice peut etre long et sans espace. En deux
     colonnes, il deborderait sur la carte voisine. */
  overflow-wrap: anywhere;
}

/* ─── Liste des contrats ───────────────────────────────────────────────────── */

.pv-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.pv-entete .content-title {
  margin: 0;
}

.pv-contrat {
  margin-bottom: 10px;
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-1, #fff);
}

.pv-contrat-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  /* Le triangle natif est retiré : la ligne porte déjà son propre rythme. */
  list-style: none;
}

.pv-contrat-tete::-webkit-details-marker {
  display: none;
}

.pv-contrat[open] > .pv-contrat-tete {
  border-bottom: 1px solid var(--fv-border-1, #e6e2d7);
  background: var(--fv-bg-3, #f7f6f2);
}

.pv-contrat-identite {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pv-contrat-nom {
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-15, 0.94rem);
  font-weight: 600;
}

.pv-contrat-meta {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
}

.pv-contrat-resume {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv-contrat-nb {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
}

.pv-badge {
  padding: 3px 10px;
  border-radius: var(--fv-r-pill, 999px);
  background: var(--fv-forest-100, #e6efe4);
  color: var(--fv-forest-700, #3d5f39);
  font-size: var(--fv-fs-12, 0.72rem);
  font-weight: 600;
  white-space: nowrap;
}

/* Une couverture terminée n'est pas une nuance : le contrat ne protège plus. */
.pv-badge--fini {
  background: #fdf2f1;
  color: #a4322a;
}

.pv-contrat-corps {
  padding: 16px;
}

.pv-contrat-vide,
.pv-contrat-obs {
  margin: 0 0 12px;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
}

.pv-contrat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Un tableau large défile dans son propre cadre : la page, elle, ne doit
   jamais défiler horizontalement. */
.pv-table {
  overflow-x: auto;
}

.pv-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fv-fs-13, 0.8rem);
}

.pv-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--fv-border-2, #ddd8cc);
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.pv-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--fv-border-1, #e6e2d7);
  color: var(--fv-fg-1, #2b2a26);
  vertical-align: top;
}

.pv-table tbody tr:last-child td {
  border-bottom: none;
}

/* Spécificité `td` : une règle plus faible perdrait contre celle ci-dessus,
   écrite avant. */
.pv-table td.pv-num {
  font-family: var(--fv-font-num, inherit);
  text-align: right;
  white-space: nowrap;
}

/* ─── Écran vide ───────────────────────────────────────────────────────────── */

.pv-vide {
  padding: 40px 20px;
  text-align: center;
}

.pv-vide-icone {
  font-size: 34px;
  color: var(--fv-fg-4, #9aa3a3);
}

.pv-vide-titre {
  margin: 12px 0 4px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-16, 1rem);
  font-weight: 600;
}

.pv-vide-texte {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-14, 0.86rem);
  line-height: var(--fv-lh-base, 1.6);
}

/* ─── Portée ───────────────────────────────────────────────────────────────── */

.pv-liste-puces {
  margin: 0;
  padding-left: 18px;
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-13, 0.82rem);
  line-height: var(--fv-lh-base, 1.6);
}

.pv-liste-puces li + li {
  margin-top: 8px;
}

/* ─── Modale ───────────────────────────────────────────────────────────────── */

.pv-modale {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pv-modale.is-hidden {
  display: none;
}

.pv-modale-fond {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 20, 0.45);
}

.pv-modale-boite {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: 90vh;
  border-radius: var(--fv-r-lg, 14px);
  background: var(--fv-bg-1, #fff);
  box-shadow: var(--fv-shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.25));
}

.pv-modale-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--fv-border-1, #e6e2d7);
}

.pv-modale-titre {
  margin: 0;
  font-size: var(--fv-fs-18, 1.1rem);
  font-weight: 600;
  color: var(--fv-fg-1, #2b2a26);
}

.pv-modale-fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--fv-r-sm, 6px);
  background: transparent;
  color: var(--fv-fg-3, #6b6558);
  font-size: 18px;
  cursor: pointer;
}

.pv-modale-fermer:hover {
  background: var(--fv-bg-3, #f7f6f2);
  color: var(--fv-fg-1, #2b2a26);
}

.pv-modale-corps {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}

.pv-modale-pied {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--fv-border-1, #e6e2d7);
}

/* ─── Formulaire ───────────────────────────────────────────────────────────── */

.pv-bloc {
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
}

.pv-bloc-titre {
  padding: 0 6px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
}

.pv-bloc-aide,
.pv-bloc-vide {
  margin: 0 0 14px;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
  line-height: var(--fv-lh-base, 1.55);
}

.pv-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pv-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pv-champ--large {
  grid-column: 1 / -1;
}

.pv-label {
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-13, 0.8rem);
  font-weight: 600;
}

.pv-aide {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.45;
}

.pv-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-bg-1, #fff);
  color: var(--fv-fg-1, #2b2a26);
  font-family: inherit;
  font-size: var(--fv-fs-14, 0.86rem);
}

.pv-input:focus {
  outline: none;
  border-color: var(--fv-border-focus, #2a4827);
  box-shadow: var(--fv-ring-focus, 0 0 0 3px rgba(42, 72, 39, 0.15));
}

.pv-textarea {
  resize: vertical;
}

/* ─── Une garantie dans la modale ──────────────────────────────────────────── */

.pv-garantie {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-3, #f7f6f2);
}

.pv-garantie-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.pv-garantie-nom {
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
}

.pv-garantie-retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--fv-r-sm, 6px);
  background: transparent;
  color: var(--fv-fg-3, #6b6558);
  cursor: pointer;
}

.pv-garantie-retirer:hover {
  border-color: #d9b6b2;
  background: #fdf2f1;
  color: #a4322a;
}

.pv-garantie-aide {
  margin: 0 0 10px;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
  line-height: 1.5;
}

.pv-garantie-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.pv-ajout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.pv-ajout .pv-input {
  flex: 1 1 240px;
  width: auto;
}

/* ─── Écrans étroits ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .pv-modale {
    padding: 0;
  }

  .pv-modale-boite {
    max-height: 100vh;
    border-radius: 0;
  }

  .pv-contrat-tete {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ─── Échec de chargement ──────────────────────────────────────────────────
   Volontairement distinct de `.pv-vide` : « aucun contrat » et « la liste n'a
   pas pu être lue » n'appellent pas la même action, et confondre les deux
   ferait affirmer un vide qu'on ne constate pas. */

.pv-echec {
  padding: 32px 20px;
  text-align: center;
}

.pv-echec-icone {
  font-size: 30px;
  color: #a4322a;
}

.pv-echec-titre {
  margin: 10px 0 4px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-15, 0.94rem);
  font-weight: 600;
}

.pv-echec-texte {
  max-width: 52ch;
  margin: 0 auto 14px;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.82rem);
  line-height: var(--fv-lh-base, 1.6);
}

.pv-echec .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-1, #fff);
  color: var(--fv-fg-1, #2b2a26);
  font-family: inherit;
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
  cursor: pointer;
}

.pv-echec .btn-secondary:hover {
  border-color: var(--fv-primary, #2a4827);
  color: var(--fv-primary, #2a4827);
}

/* ─── Péremption d'un montant calculé [Lot 3] ──────────────────────────────
   Ce n'est pas le temps qui périme un capital décès, c'est un changement de
   situation : une naissance le périme le jour même. Le bandeau DIT ce qui a
   bougé — il ne recalcule pas tout seul. */

.pv-perime {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e8d2a8;
  border-left: 3px solid var(--fv-honey-500, #c99a3a);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-honey-100, #fdf6e6);
}

.pv-perime-icone {
  flex: none;
  margin-top: 2px;
  color: var(--fv-honey-700, #9a7526);
  font-size: 18px;
}

.pv-perime-texte {
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-13, 0.82rem);
  line-height: var(--fv-lh-base, 1.6);
}

.pv-perime-texte p {
  margin: 0 0 8px;
}

.pv-perime-titre {
  color: var(--fv-fg-1, #2b2a26);
  font-weight: 600;
}

.pv-perime .btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-1, #fff);
  color: var(--fv-fg-1, #2b2a26);
  font-family: inherit;
  font-size: var(--fv-fs-13, 0.82rem);
  font-weight: 600;
  cursor: pointer;
}

.pv-perime .btn-secondary:hover {
  border-color: var(--fv-honey-700, #9a7526);
  color: var(--fv-honey-700, #9a7526);
}

/* ─── Un montant non calculé n'est pas un zéro ─────────────────────────────
   Il se distingue à l'œil : la garantie existe, son montant est inconnu. */

.pv-table td.pv-non-calcule {
  color: #a4322a;
  font-style: italic;
}

.pv-table td.pv-comment {
  max-width: 34ch;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
  line-height: 1.45;
}

.pv-carte-alerte {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-honey-100, #fdf6e6);
  color: var(--fv-honey-700, #9a7526);
  font-size: var(--fv-fs-12, 0.75rem);
  line-height: 1.5;
}

/* ─── Paliers d'âge d'une rente d'éducation ────────────────────────────────── */

.pv-paliers {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--fv-border-2, #ddd8cc);
}

/* ⚠️ PAS de `repeat(auto-fit, …)` ici : combiné à une autre piste (le bouton
   de retrait, en `auto`), il rend toute la déclaration INVALIDE — la grille
   retombe alors sur une colonne unique et les quatre champs s'empilent. Le
   navigateur ne signale rien, il applique simplement le défaut. Flex fait le
   même travail et se replie correctement. */
.pv-palier {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.pv-palier .pv-champ {
  flex: 1 1 110px;
}

.pv-palier .pv-garantie-retirer {
  flex: none;
  margin-bottom: 4px;
}

.pv-paliers .btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-1, #fff);
  color: var(--fv-fg-1, #2b2a26);
  font-family: inherit;
  font-size: var(--fv-fs-13, 0.82rem);
  font-weight: 600;
  cursor: pointer;
}

.pv-paliers .btn-secondary:hover {
  border-color: var(--fv-primary, #2a4827);
  color: var(--fv-primary, #2a4827);
}

/* ─── Dépôt d'une notice [Lot 6] ───────────────────────────────────────────
   L'import est un RACCOURCI, jamais une dépendance : la saisie manuelle reste
   le chemin normal. La zone est donc discrète, pas dominante. */

.pv-depot {
  position: relative;
  padding: 28px 20px;
  border: 2px dashed var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-lg, 14px);
  background: var(--fv-bg-3, #f7f6f2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fv-dur-fast, 120ms) var(--fv-ease, ease),
    background var(--fv-dur-fast, 120ms) var(--fv-ease, ease);
}

.pv-depot:hover,
.pv-depot.is-survol {
  border-color: var(--fv-primary, #2a4827);
  background: var(--fv-forest-100, #e6efe4);
}

.pv-depot-icone {
  font-size: 26px;
  color: var(--fv-fg-4, #9aa3a3);
}

.pv-depot-titre {
  margin: 8px 0 4px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
}

.pv-depot-aide {
  margin: 0;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
}

/* L'input couvre toute la zone : c'est lui qui reçoit le clic natif, ce qui
   évite d'avoir à simuler l'ouverture du sélecteur au clavier. */
.pv-depot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.pv-depot-etat {
  margin: 12px 0 0;
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-13, 0.82rem);
}

/* ─── Ce qui a été relevé ─────────────────────────────────────────────────── */

.pv-releve {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--fv-border-1, #e6e2d7);
}

.pv-releve-titre {
  margin: 0 0 8px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-15, 0.94rem);
  font-weight: 600;
}

/* Ton d'avertissement, pas de succès : ces valeurs sont relevées, pas
   vérifiées. Un fond vert donnerait à croire qu'elles sont acquises. */
.pv-releve-avis {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--fv-honey-500, #c99a3a);
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-honey-100, #fdf6e6);
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-12, 0.78rem);
  line-height: var(--fv-lh-base, 1.6);
}

.pv-releve-note {
  margin: 12px 0 0;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.78rem);
  line-height: var(--fv-lh-base, 1.6);
}

/* ─── Indicateur d'analyse ─────────────────────────────────────────────────
   Une ligne de texte grise passait inaperçue pendant les deux minutes d'OCR.
   On reprend le patron de l'import cadastral : une étape nommée, une barre
   qui bouge, et le temps d'attente annoncé. */

.pv-progres {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-1, #fff);
}

.pv-progres-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
}

.pv-progres-icone {
  color: var(--fv-dom-ai, #5b4aa8);
  font-size: 18px;
}

.pv-progres-piste {
  height: 4px;
  border-radius: 2px;
  background: var(--fv-border-1, #e6e2d7);
  overflow: hidden;
}

.pv-progres-barre {
  height: 4px;
  border-radius: 2px;
  background: var(--fv-dom-ai, #5b4aa8);
  animation: pvGlisse 1.4s ease-in-out infinite;
}

@keyframes pvGlisse {
  0% { width: 0; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0; margin-left: 100%; }
}

.pv-progres-aide {
  margin: 8px 0 0;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
  line-height: 1.5;
}

/* ─── Le relevé, exploitable ───────────────────────────────────────────────── */

.pv-releve-type {
  min-width: 160px;
  padding: 5px 8px;
  font-size: var(--fv-fs-12, 0.78rem);
}

.pv-releve-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 14px;
}

.pv-releve-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-primary, #2a4827);
  color: var(--fv-fg-on-brand, #fff);
  font-family: inherit;
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
  cursor: pointer;
}

.pv-releve-actions .btn-primary:hover:not(:disabled) {
  background: var(--fv-primary-hover, #35592f);
}

.pv-releve-actions .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pv-releve-compte {
  flex: 1 1 220px;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.78rem);
  line-height: 1.5;
}

/* ─── Salaire d'essai, filtres, lignes écartées ────────────────────────────── */

.pv-salaire {
  max-width: 340px;
  margin: 0 0 16px;
}

/* Une ligne de filtres sous les en-têtes : le tableau se réduit à la frappe,
   sans bouton ni rechargement. */
.pv-filtres th {
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--fv-border-2, #ddd8cc);
}

.pv-filtre {
  width: 100%;
  min-width: 90px;
  padding: 4px 8px;
  font-size: var(--fv-fs-12, 0.75rem);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Les lignes qui ne concernent pas le foyer : à part, repliées, mais
   accessibles. Les masquer priverait de recours si notre lecture se trompe. */
.pv-hors {
  margin-top: 16px;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-3, #f7f6f2);
}

.pv-hors-titre {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--fv-fg-2, #4a463d);
  font-size: var(--fv-fs-13, 0.82rem);
  font-weight: 600;
}

.pv-hors[open] > .pv-hors-titre {
  border-bottom: 1px solid var(--fv-border-1, #e6e2d7);
}

.pv-hors-aide {
  margin: 0;
  padding: 12px 14px 0;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.78rem);
  line-height: var(--fv-lh-base, 1.6);
}

.pv-hors .pv-table {
  padding: 0 14px 14px;
}

/* ─── Aperçu du montant dans le formulaire ─────────────────────────────────
   Sans lui, on saisit « 250 % » sans jamais voir ce que cela fait en euros —
   et une faute de frappe passe inaperçue jusqu'au rapport. */

.pv-apercu {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-forest-100, #e6efe4);
  color: var(--fv-forest-700, #3d5f39);
  font-size: var(--fv-fs-13, 0.82rem);
  font-weight: 600;
}

.pv-apercu--manque {
  background: var(--fv-honey-100, #fdf6e6);
  color: var(--fv-honey-700, #9a7526);
  font-weight: 400;
}

/* ─── Contacts et autocomplétion d'adresse ─────────────────────────────────── */

.pv-contact {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-3, #f7f6f2);
}

/* La liste de suggestions se superpose : le champ parent doit ancrer. */
.pv-champ {
  position: relative;
}

.pv-sugg {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-bg-1, #fff);
  box-shadow: var(--fv-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.pv-sugg.is-hidden {
  display: none;
}

.pv-sugg-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: var(--fv-fs-13, 0.82rem);
}

.pv-sugg-item:hover,
.pv-sugg-item:focus {
  background: var(--fv-forest-100, #e6efe4);
  outline: none;
}

.pv-sugg-contexte {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.75rem);
}

.pv-bloc .btn-secondary.is-hidden {
  display: none;
}

/* ── L'évolution d'une rente dans le temps ─────────────────────────────────
   [Chantier Prévoyance]

   Une rente d'éducation change de montant à chaque anniversaire clé et
   s'éteint. Un chiffre unique ne peut pas la décrire : il faut la SUITE. Ce
   bloc remplace l'addition des paliers, qui affichait un montant jamais versé.

   Une bordure gauche plutôt qu'un encadré : c'est une précision sur le chiffre
   du dessus, pas un second chiffre concurrent. */
.pv-carte-rente {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 0 10px 12px;
  border-left: 3px solid var(--fv-border, #e3ded2);
}

.pv-carte-rente-titre {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pv-carte-rente-suite {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pv-carte-rente-suite li {
  font-size: var(--fv-fs-13, 0.8rem);
  line-height: 1.5;
  color: var(--fv-fg-1, #2f2b23);
}

.pv-carte-rente-suite strong {
  font-family: var(--fv-font-num, inherit);
  color: var(--fv-primary, #2a4827);
}

.pv-carte-rente-qui {
  color: var(--fv-fg-3, #6b6558);
}

.pv-carte-rente-fin {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.45;
}

/* Des tranches d'âge déduites d'un libellé de notice, pas saisies : une borne
   lue de travers déplace l'extinction de plusieurs années. */
.pv-carte-rente-alerte {
  padding: 6px 8px;
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-honey-100, #fdf6e6);
  color: var(--fv-honey-700, #9a7526);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.5;
}

/* Le libellé lu dans la notice, sous le type de garantie.
   [Chantier Prévoyance] Trois lignes intitulées « Rente d'éducation » sont
   indiscernables : c'est ce qui rendait invisible l'échec du regroupement. */
.pv-carte-liste-gauche {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Les textes que l'outil a lus sur une ligne qu'il n'a pas su interpréter.
   [Chantier Prévoyance] Sans eux, « je n'ai pas su lire » ne dit pas QUOI
   corriger — et le lecteur cherche du côté de ses enfants. */
.pv-carte-textes {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  list-style: disc;
}

.pv-carte-textes li {
  color: var(--fv-fg-2, #4a4438);
  font-size: var(--fv-fs-12, 0.75rem);
  line-height: 1.6;
  word-break: break-word;
}

/* ── Verrou d'interface ────────────────────────────────────────────────────
   [Chantier Prévoyance] Posé tant qu'un appel réseau tourne. Agir sur une
   liste à moitié chargée conduit à enregistrer un contrat contre un état du
   foyer qui n'est pas celui affiché. */
.pv-verrou {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 30, 27, 0.35);
  backdrop-filter: blur(2px);
}

.pv-verrou.is-hidden {
  display: none;
}

.pv-verrou-boite {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-radius: var(--fv-r-lg, 14px);
  background: var(--fv-bg-1, #fff);
  box-shadow: var(--fv-shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.25));
}

.pv-verrou-anneau {
  width: 22px;
  height: 22px;
  border: 3px solid var(--fv-border-2, #ddd8cc);
  border-top-color: var(--fv-primary, #2a4827);
  border-radius: 50%;
  animation: pvTourne 0.9s linear infinite;
}

@keyframes pvTourne {
  to { transform: rotate(360deg); }
}

.pv-verrou-texte {
  margin: 0;
  color: var(--fv-fg-1, #2b2a26);
  font-size: var(--fv-fs-14, 0.86rem);
  font-weight: 600;
}

/* Une animation qui tourne sans fin est une gêne réelle pour qui y est
   sensible : le voile et le message suffisent à dire que la page travaille. */
@media (prefers-reduced-motion: reduce) {
  .pv-verrou-anneau {
    animation: none;
  }
}

/* ── Les majorations, à titre indicatif ────────────────────────────────────
   [Chantier Prévoyance] Volontairement HORS du bloc de chiffres : les aligner
   avec les capitaux inviterait à en faire la somme, alors qu'elles ne sont
   versées que si le décès a une cause précise — et qu'elles ne se cumulent
   pas entre elles. */
.pv-carte-majo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-bg-2, #fdfcf9);
  border: 1px dashed var(--fv-border-1, #e6e2d7);
}

.pv-carte-majo-titre {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pv-carte-majo-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pv-carte-majo-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: var(--fv-fs-13, 0.8rem);
  color: var(--fv-fg-1, #2f2b23);
}

.pv-carte-majo-liste strong {
  font-family: var(--fv-font-num, inherit);
  color: var(--fv-fg-2, #4a4438);
  white-space: nowrap;
}

.pv-carte-majo-aide {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.45;
}

/* ── Le salaire proposé depuis « Revenus d'activité » ──────────────────────
   [Chantier Emplois — Lot 4]

   ⚠️ PROPOSÉ, jamais appliqué d'office sur un champ rempli.
      `salaire_reference` est la base contractuelle du contrat, figée à une
      année : un montant qui changerait tout seul entre deux visites rendrait
      incompréhensible le rapport d'analyse produit la veille. */
.pv-salaire-propose {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.pv-salaire-note {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.45;
}

/* Un lien, pas un bouton plein : c'est une suggestion, pas l'action
   principale du formulaire. */
.pv-salaire-reprendre {
  padding: 2px 6px;
  border: 1px solid var(--fv-border-2, #ddd8cc);
  border-radius: var(--fv-r-sm, 6px);
  background: var(--fv-bg-1, #fff);
  color: var(--fv-link, #205a89);
  font-family: inherit;
  font-size: var(--fv-fs-12, 0.72rem);
  font-weight: 600;
  cursor: pointer;
}

.pv-salaire-reprendre:hover {
  border-color: var(--fv-link, #205a89);
  background: var(--fv-bg-2, #fdfcf9);
}
