/* =========================================================================
   L'APERÇU DE L'ESPACE RECRUTEUR — components/public/ApercuEspaceRecruteur.tsx

   Une fenêtre claire qui reprend l'interface réelle de l'espace : le bandeau
   prune « Mes annonces » et sa synthèse, puis les lignes du tableau, leurs
   étiquettes et leurs candidatures. Les couleurs des étiquettes sont celles
   d'espace-recruteur.css (« --esp-vert », « --esp-bleu », « --esp-ambre »),
   recopiées ici : cette feuille-là n'est chargée que dans l'espace.

   Les mouvements n'existent que sous « .apx--anime », posée par le composant
   quand la démonstration se joue — jamais sur téléphone, jamais quand le
   mouvement est refusé. L'aperçu fixe ne bouge pas, pas même au chargement.
   ========================================================================= */
.apx{
  --apx-encre:#2A1520;--apx-encre-2:#5A4A52;--apx-encre-3:#8A7781;
  --apx-ligne:#EFE6EB;
  position:relative;width:100%;max-width:520px;
  border-radius:16px;overflow:hidden;
  background:#fff;border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(50,21,37,.06), 0 30px 60px -36px rgba(20,4,12,.55);
  font-size:13px;line-height:1.35;color:var(--apx-encre);
  text-align:left;
}

/* La barre de fenêtre. */
.apx__barre{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--apx-ligne);background:#FBF8FA;
}
.apx__barre > span{width:8px;height:8px;border-radius:50%;background:#E8DCE3}
.apx__adresse{
  margin:0 0 0 8px;font-size:11.5px;font-weight:500;color:var(--apx-encre-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Le bandeau : la matière de « .esp-bandeau », à l'échelle de l'aperçu. */
.apx__bandeau{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:12px 12px 4px;padding:16px 18px;border-radius:12px;color:#FFFBFD;
  background:
    radial-gradient(74% 120% at 2% 0%,rgba(233,150,190,.24) 0%,rgba(233,150,190,0) 58%),
    radial-gradient(60% 130% at 100% 40%,rgba(201,45,120,.34) 0%,rgba(201,45,120,0) 62%),
    linear-gradient(142deg,#54143A 0%,#40102A 46%,#2E0B1D 100%);
}
.apx__los{
  position:absolute;right:-26px;top:-26px;width:84px;height:84px;rotate:45deg;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
}
.apx__sur{margin:0 0 2px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,251,253,.62)}
.apx__t{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.apx__synthese{
  position:relative;padding:8px 12px;border-radius:10px;text-align:right;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
}
.apx__n{margin:0;font-size:18px;font-weight:600;line-height:1.1}
.apx__n span{font-size:11px;font-weight:500;color:rgba(255,251,253,.7)}
.apx__detail{margin:2px 0 0;font-size:11px;color:rgba(255,251,253,.74)}
.apx__detail b{color:#fff}

/* Les lignes du tableau. */
.apx__liste{list-style:none;margin:0;padding:6px 12px 4px}
.apx__ligne{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(92px,auto);
  align-items:center;gap:12px;
  padding:11px 6px;border-bottom:1px solid var(--apx-ligne);
}
.apx__ligne:last-child{border-bottom:0}
.apx__titre{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx__meta{margin:2px 0 0;font-size:11.5px;color:var(--apx-encre-3)}

/* Les étiquettes : celles de « .esp-etiq », losange compris. */
.apx__etiq{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 7px;
  border:1px solid transparent;border-radius:6px;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
}
.apx__etiq::before{content:"";width:5px;height:5px;rotate:45deg;border-radius:1px;background:currentColor;opacity:.85}
.apx__etiq--vert {color:#1E6B41;background:#E9F4ED;border-color:#C9E4D4}
.apx__etiq--bleu {color:#1F4C8F;background:#E6EEFB;border-color:#CBDCF4}
.apx__etiq--ambre{color:#875614;background:#FCF2DE;border-color:#EEDCB6}

.apx__cand{
  position:relative;margin:0;display:flex;align-items:baseline;justify-content:flex-end;gap:5px;
  font-size:11.5px;color:var(--apx-encre-2);white-space:nowrap;
}
.apx__cand b{font-size:16px;font-weight:600;color:var(--apx-encre);font-variant-numeric:tabular-nums}
.apx__sans{color:var(--apx-encre-3)}
.apx__nouvelle{
  align-self:center;margin-left:4px;padding:2px 7px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  color:#951753;background:#FDF1F7;border:1px solid rgba(201,45,120,.2);
}

.apx__fictif{
  margin:0;padding:8px 18px 12px;font-size:10.5px;color:var(--apx-encre-3);text-align:right;
}

/* --- La démonstration, et elle seule --------------------------------------
   Avant l'entrée : les lignes attendent, un peu plus bas. À l'entrée : elles
   se posent l'une après l'autre, lentement. Puis l'étiquette qui change et
   le chiffre qui monte se fondent — un fondu, pas un saut. */
.apx--avant .apx__ligne{opacity:0;transform:translateY(10px)}
.apx--anime .apx__ligne{
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i) * .22s + .15s);
}
.apx--anime .apx__etiq--neuve,
.apx--anime .apx__chiffre,
.apx--anime .apx__nouvelle{animation:apx-fondu 1.1s ease both}
.apx--anime .apx__etiq--neuve{animation-name:apx-publie;animation-duration:1.6s}
@keyframes apx-fondu{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes apx-publie{
  0%{opacity:0;box-shadow:0 0 0 0 rgba(30,107,65,0)}
  35%{opacity:1;box-shadow:0 0 0 5px rgba(30,107,65,.12)}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(30,107,65,0)}
}
@media (prefers-reduced-motion:reduce){
  .apx .apx__ligne{opacity:1!important;transform:none!important;transition:none!important}
  .apx *{animation:none!important}
}

/* --- La version compacte (page de dépôt) ----------------------------------
   Deux lignes, sans bandeau : elle tient dans le panneau prune de la carte
   d'accès. Plus serrée, mêmes étiquettes. */
.apx--compact{max-width:none;border-radius:12px;font-size:12px}
.apx--compact .apx__barre{padding:8px 12px}
.apx--compact .apx__adresse{font-size:10.5px}
.apx--compact .apx__liste{padding:2px 10px}
.apx--compact .apx__ligne{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:9px 4px}
.apx--compact .apx__titre{font-size:12.5px;white-space:normal;line-height:1.3}
.apx--compact .apx__meta{display:none}
.apx--compact .apx__cand{grid-column:1 / -1;justify-content:flex-start;font-size:11px}
.apx--compact .apx__cand b{font-size:13px}
.apx--compact .apx__fictif{padding:4px 14px 9px;font-size:10px}

/* --- Téléphone --------------------------------------------------------------
   L'aperçu est fixe (le composant ne le met pas en mouvement sous 760 px) ;
   ici, il se resserre pour rester lisible. */
@media (max-width:760px){
  .apx{font-size:12px}
  .apx__bandeau{padding:13px 14px}
  .apx__t{font-size:15px}
  .apx__ligne{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .apx__cand{grid-column:1 / -1;justify-content:flex-start}
  .apx__meta{display:none}
  /* Le titre passe à la ligne plutôt que d'être coupé par une étiquette
     longue (« En cours de vérification »). */
  .apx__titre{white-space:normal;line-height:1.3}
}