/* emplois.css — Revenus d'activité [Chantier Emplois, Lot 3]
   Spécification : docs/Private/TECHNIQUE/CHANTIER-EMPLOIS.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`. Sans les règles ci-dessous, les boutons de
      cette page seraient des `<button>` bruts. Même constat que prevoyance.css.

   ⚠️ Zéro style inline dans le HTML et le JS : la CSP est `style-src 'self'`.
*/

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

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

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

.em-liste-carte .btn-primary,
.em-modale .btn-primary,
.em-liste-carte .btn-secondary,
.em-modale .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);
}

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

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

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

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

.em-btn-icone {
  padding: 8px 10px;
}

/* Sélecteur volontairement plus spécifique que la règle générique ci-dessus :
   à spécificité ÉGALE c'est l'ordre qui tranche, et la générique est écrite
   avant — le bouton resterait de la couleur ordinaire. */
.em-liste-carte .btn-secondary.em-btn-danger {
  border-color: #d9b6b2;
  color: #a4322a;
}

.em-liste-carte .btn-secondary.em-btn-danger:hover {
  border-color: #a4322a;
  background: #fdf2f1;
  color: #8c2a23;
}

/* ─── Barre d'actions ──────────────────────────────────────────────────────── */

.em-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.em-bascule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fv-fg-2, #4a4438);
  font-size: var(--fv-fs-13, 0.8rem);
  cursor: pointer;
}

.em-vide {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
  line-height: 1.6;
}

/* ─── Une carte d'emploi ───────────────────────────────────────────────────── */

.em-carte {
  min-width: 0;
  padding: 18px;
  margin-bottom: 14px;
  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);
}

.em-carte-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.em-carte-titre-bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

.em-carte-sous {
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
  overflow-wrap: anywhere;
}

.em-carte-boutons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

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

/* ─── Les trois montants ───────────────────────────────────────────────────── */

/* ⚠️ Trois colonnes, jamais deux : le net imposable et le net à payer doivent
      se voir CÔTE À CÔTE. C'est leur écart — cinq points — qui explique
      pourquoi l'impôt et le niveau de vie ne prennent pas le même chiffre. */
.em-carte-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .em-carte-chiffres {
    grid-template-columns: minmax(0, 1fr);
  }
}

.em-carte-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

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

.em-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);
}

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

.em-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;
}

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

.em-modale {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

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

.em-modale-fond {
  position: absolute;
  inset: 0;
  background: rgba(28, 30, 27, 0.45);
}

.em-modale-boite {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(820px, 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));
  overflow: hidden;
}

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

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

.em-modale-fermer {
  padding: 6px;
  border: none;
  background: none;
  color: var(--fv-fg-3, #6b6558);
  cursor: pointer;
}

.em-modale-fermer:hover {
  color: var(--fv-fg-1, #2b2a26);
}

.em-modale-corps {
  padding: 22px;
  overflow-y: auto;
}

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

/* ─── Champs ───────────────────────────────────────────────────────────────── */

.em-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 720px) {
  .em-champs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.em-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

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

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

.em-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);
}

.em-input:focus {
  outline: 2px solid var(--fv-primary, #2a4827);
  outline-offset: 1px;
}

.em-textarea {
  resize: vertical;
}

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

/* ─── Aperçu des montants dérivés ──────────────────────────────────────────── */

/* Encadré distinct des champs : ce ne sont pas des saisies, ce sont des
   conséquences. Les mêler au formulaire donnerait à croire qu'on peut les
   modifier directement. */
.em-apercu {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed var(--fv-border-1, #e6e2d7);
  border-radius: var(--fv-r-md, 10px);
  background: var(--fv-bg-2, #fdfcf9);
}

.em-apercu-vide {
  margin: 0;
  color: var(--fv-fg-3, #6b6558);
  font-size: var(--fv-fs-13, 0.8rem);
}

.em-apercu-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 720px) {
  .em-apercu-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.em-apercu-bloc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

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

.em-apercu-valeur {
  font-family: var(--fv-font-num, inherit);
  font-size: var(--fv-fs-18, 1.1rem);
  font-weight: 700;
  color: var(--fv-primary, #2a4827);
}

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

/* Un montant ESTIMÉ se signale. Un chiffre approché qui s'annonce comme tel ne
   trompe personne ; le même, caché, si. */
.em-apercu-alerte {
  color: var(--fv-honey-700, #9a7526);
  font-size: var(--fv-fs-12, 0.72rem);
  line-height: 1.45;
}

/* ─── Verrou d'interface ───────────────────────────────────────────────────── */

.em-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);
}

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

.em-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));
}

.em-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: emTourne 0.9s linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .em-verrou-anneau {
    animation: none;
  }
}