/**
 * Emplois et missions freelance — la page dessinée par Claude Design.
 *
 * Deux onglets qui ne partagent que leur ossature : à gauche les filtres, à
 * droite les cartes. Une offre d'emploi et une mission ne se lisent pas de
 * la même façon — l'une porte un contrat, l'autre un budget — mais elles se
 * cherchent pareil, et c'est la colonne de filtres qui le dit.
 */

body {
  background: var(--fy-nuit, #07071a);
  color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── La barre du haut ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: 10px;
  font-family: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
}
.btn-outline { background: transparent; color: var(--fy-gris, #a5a3bc); border: 1px solid rgba(255, 255, 255, .16); }
.btn-outline:hover { border-color: rgba(139, 123, 255, .5); color: var(--fy-encre, #f2f1f7); }
.btn-primary { background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); }
.btn-primary:hover { background: var(--fy-violet-vif, #a395ff); }

/* 1100 : mesuree, la barre la plus chargee (/live, deconnecte) reclame
   1055 px. La barre d onglets prend le relais au MEME seuil, pose dans
   nav.css — les deplacer separement rouvre une bande sans navigation. */
@media (max-width: 1100px) { .fy-menu-barre { display: none; } }

/* ── Les deux onglets ─────────────────────────────────────────────────── */
.em-page { max-width: 1100px; margin: 0 auto; padding: 0 32px 100px; }

.em-bascule {
  display: flex; gap: 6px; padding: 6px; margin: 26px 0 0;
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px; width: fit-content; max-width: 100%; flex-wrap: wrap;
}
.em-onglet {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .95rem; font-weight: 600;
}
.em-onglet:hover { color: var(--fy-encre, #f2f1f7); }
.em-onglet[aria-selected="true"] { background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a); }
.em-onglet-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .78rem; color: var(--fy-sourd, #6e6c88);
}
.em-onglet[aria-selected="true"] .em-onglet-nb { color: var(--fy-clair-texte, #54525c); }

/* ── L'annonce de tête ────────────────────────────────────────────────── */
.em-chapeau { display: flex; align-items: flex-end; gap: 32px; margin: 30px 0 28px; flex-wrap: wrap; }
.em-chapeau-corps { flex: 1; min-width: 260px; }
.em-etiq {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em;
  color: var(--fy-sourd, #6e6c88); margin-bottom: 12px;
}
.em-titre {
  margin: 0 0 12px; font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 2.25rem; line-height: 1.1; text-wrap: balance;
}
.em-chapo { margin: 0; max-width: 62ch; font-size: 1rem; line-height: 1.65; color: var(--fy-gris, #a5a3bc); }
.em-action-tete { flex: none; }

/* ── La grille ────────────────────────────────────────────────────────── */
.em-grille { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; }
@media (max-width: 940px) { .em-grille { grid-template-columns: 1fr; } }

/* ── Les filtres ──────────────────────────────────────────────────────── */
.em-filtres { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 940px) { .em-filtres { position: static; } }

.em-recherche {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px;
  background: var(--fy-carte, #0c0c24); color: var(--fy-sourd, #6e6c88);
}
.em-recherche input {
  flex: 1; min-width: 0; height: 100%; min-height: 0; border: 0; background: none; outline: none;
  color: var(--fy-encre, #f2f1f7); font-family: inherit; font-size: .9rem;
}
.em-recherche input::placeholder { color: var(--fy-faible, #4a4866); }

.em-bloc-titre {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em;
  color: var(--fy-sourd, #6e6c88); margin-bottom: 12px;
}
.em-liste-filtre { display: flex; flex-direction: column; gap: 2px; }
.em-filtre {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .9rem; text-align: left;
}
.em-filtre:hover { background: rgba(255, 255, 255, .04); color: var(--fy-encre, #f2f1f7); }
.em-filtre[aria-pressed="true"] { background: rgba(139, 123, 255, .14); color: var(--fy-encre, #f2f1f7); }
.em-filtre-nb {
  margin-left: auto; font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .75rem; color: var(--fy-sourd, #6e6c88);
}

.em-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.em-puce {
  min-height: 44px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: transparent;
  color: var(--fy-corps, #d6d4e4); font-family: inherit; font-size: .82rem;
}
.em-puce:hover { border-color: rgba(255, 255, 255, .3); }
.em-puce[aria-pressed="true"] {
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-color: var(--fy-clair, #f4f2ee); font-weight: 600;
}

/* L'interrupteur des entretiens en direct. */
.em-bascule-ligne { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.em-interrupteur {
  position: relative; width: 40px; height: 22px; flex: none; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .14); cursor: pointer; padding: 0;
}
.em-interrupteur::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--fy-sourd, #7e7c99); transition: transform .16s ease, background .16s ease;
}
.em-interrupteur[aria-pressed="true"] { background: var(--fy-cyan, #5cd6e8); }
.em-interrupteur[aria-pressed="true"]::after { transform: translateX(18px); background: var(--fy-nuit, #07071a); }
.em-bascule-mot { font-size: .9rem; color: var(--fy-corps, #d6d4e4); }
.em-bascule-sous { display: block; font-size: .75rem; color: var(--fy-sourd, #6e6c88); margin-top: 2px; }

.em-curseur { display: flex; flex-direction: column; gap: 8px; }
.em-curseur input { width: 100%; accent-color: var(--fy-violet, #8b7bff); height: 44px; }
.em-curseur-bornes {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; color: var(--fy-sourd, #6e6c88);
}

/* Mes candidatures / mes propositions. */
.em-compteurs {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px; padding: 16px;
}
.em-compteurs[hidden] { display: none; }
.em-compteur-ligne {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; font-size: .875rem; color: var(--fy-gris, #a5a3bc);
}
.em-compteur-ligne + .em-compteur-ligne { border-top: 1px solid rgba(255, 255, 255, .07); }
.em-compteur-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1rem; font-weight: 500; color: var(--fy-encre, #f2f1f7);
  font-variant-numeric: tabular-nums;
}

/* ── L'en-tête de la liste ────────────────────────────────────────────── */
.em-entete {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; letter-spacing: .1em; color: var(--fy-sourd, #6e6c88);
}
.em-tri { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.em-tri select {
  min-height: 36px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: var(--fy-carte, #0c0c24);
  color: var(--fy-encre, #f2f1f7); font-family: inherit; font-size: .8rem;
}

/* ── Les cartes ───────────────────────────────────────────────────────── */
.em-cartes { display: flex; flex-direction: column; gap: 14px; }
.em-carte {
  display: block; text-decoration: none; color: inherit;
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: 22px;
}
.em-carte:hover { border-color: rgba(255, 255, 255, .2); }
.em-carte-tete { display: flex; align-items: flex-start; gap: 16px; }
.em-vignette {
  width: 46px; height: 46px; flex: none; border-radius: 13px; overflow: hidden;
  background: var(--fy-surface, #14142e); display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.em-vignette img { width: 100%; height: 100%; object-fit: cover; }
.em-carte-corps { flex: 1; min-width: 0; }
.em-fanions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.em-fanion {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .5625rem; font-weight: 500; letter-spacing: .1em;
  border-radius: 100px; padding: 4px 9px;
}
.em-fanion-suivi { color: var(--fy-violet, #8b7bff); background: rgba(139, 123, 255, .14); }
.em-fanion-pays  { color: var(--fy-cyan, #5cd6e8);   background: rgba(92, 214, 232, .12); }
.em-fanion-verif { color: var(--fy-nuit, #07071a);   background: var(--fy-cyan, #5cd6e8); }
.em-carte-titre { font-size: 1.09rem; font-weight: 600; line-height: 1.3; }
.em-carte-qui { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; font-size: .875rem; color: var(--fy-gris, #a5a3bc); }
.em-carte-qui b { font-weight: 600; color: var(--fy-corps, #d6d4e4); }
.em-carte-texte { margin: 13px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }
.em-prix { flex: none; text-align: right; }
.em-prix-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1.25rem; font-weight: 500; color: var(--fy-cyan, #5cd6e8);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.em-prix-mot {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .5625rem; letter-spacing: .1em; color: var(--fy-sourd, #6e6c88); margin-top: 5px;
}
.em-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.em-tag {
  font-size: .75rem; padding: 5px 10px; border-radius: 7px;
  background: rgba(255, 255, 255, .05); color: var(--fy-gris, #a5a3bc);
}
.em-carte-pied {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .82rem; color: var(--fy-sourd, #6e6c88);
}
.em-postuler {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: inherit; font-size: .845rem; font-weight: 600;
}
.em-postuler:hover { background: var(--fy-violet-vif, #a395ff); }
.em-postuler:disabled { background: rgba(255, 255, 255, .08); color: var(--fy-sourd, #6e6c88); cursor: default; }
.em-entretiens { display: inline-flex; align-items: center; gap: 7px; color: var(--fy-ambre, #f0b45c); }
.em-point-vif {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: #ff6b6b;
  animation: em-pouls 1.8s ease-in-out infinite;
}
@keyframes em-pouls { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .em-point-vif { animation: none } }

/* ── Le direct d'entretiens en cours ──────────────────────────────────── */
.em-direct {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 20px; border-radius: 16px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(255, 107, 107, .12), transparent);
  border: 1px solid rgba(255, 107, 107, .4);
}
.em-direct[hidden] { display: none; }
.em-direct-corps { flex: 1; min-width: 200px; }
.em-direct-quand {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .1em; color: #ff6b6b;
}

/* ── Encarts ──────────────────────────────────────────────────────────── */
.em-encart {
  margin-top: 20px; padding: 24px; border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, .18);
}
.em-encart-verifie { border: 1px solid rgba(92, 214, 232, .3); background: rgba(92, 214, 232, .05); }
.em-encart-titre { font-size: 1.03rem; font-weight: 600; margin-bottom: 9px; }
.em-encart p { margin: 0 0 16px; font-size: .9375rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); }
.em-encart p:last-child { margin-bottom: 0; }

.em-vide {
  text-align: center; padding: 56px 20px; color: var(--fy-sourd, #6e6c88);
  font-size: .9375rem; line-height: 1.6;
}

/* ── Les fenêtres de dépôt ────────────────────────────────────────────── */
.em-voile {
  position: fixed; inset: 0; z-index: 300; padding: 20px;
  background: rgba(7, 7, 26, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.em-voile[hidden] { display: none; }
.em-fenetre {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(139, 123, 255, .35);
  border-radius: 20px; padding: 26px; width: 100%; max-width: 620px; max-height: 100%; overflow: auto;
}
.em-champ-titre { display: block; font-size: .845rem; color: var(--fy-gris, #a5a3bc); margin-bottom: 8px; }
.em-champ, .em-zone {
  width: 100%; min-height: 44px; padding: 12px 15px; outline: none;
  background: var(--fy-nuit, #07071a); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; color: #e6e4f0; font-family: inherit; font-size: .9375rem;
}
.em-champ:focus, .em-zone:focus { border-color: rgba(139, 123, 255, .55); }
.em-zone { min-height: 92px; resize: vertical; line-height: 1.6; }
.em-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.em-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px) { .em-duo, .em-trio { grid-template-columns: 1fr; } }
.em-mono { margin-bottom: 16px; }
.em-note {
  margin: 0 0 18px; padding: 13px 15px; border-radius: 11px;
  background: rgba(139, 123, 255, .07); border-left: 2px solid var(--fy-violet, #8b7bff);
  font-size: .845rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc);
}
.em-pied-fenetre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.em-valide {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: inherit; font-size: .92rem; font-weight: 600;
}
.em-valide:hover { background: var(--fy-violet-vif, #a395ff); }
.em-valide:disabled { opacity: .55; cursor: not-allowed; }
.em-annule {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .92rem;
}
.em-annule:hover { background: rgba(255, 255, 255, .14); }
.em-message { font-size: .82rem; color: var(--fy-sourd, #6e6c88); }
.em-message.em-ko { color: #ff8f8f; }

/* ── Le message ───────────────────────────────────────────────────────── */
.em-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 400;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-radius: 13px; padding: 15px 20px; font-size: .9375rem; font-weight: 500;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.em-toast[hidden] { display: none; }
.em-carre { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--fy-violet, #8b7bff); }

@media (max-width: 760px) {
  .em-page { padding-left: 20px; padding-right: 20px; }
  .em-titre { font-size: 1.75rem; }
  .em-carte-tete { flex-wrap: wrap; }
  .em-prix { text-align: left; }
}