/* ══════════════════════════════════════════════════════════════════════
   FICHES OFFRE & ENTREPRISE — design « Maquette 10 »

   Reprend la maquette (badges pilule, score de correspondance vert, card
   recruteur, aside en lignes) mais en CSS responsive, dans le layout du site.
   La palette est celle du design system (violet #8A63C1, encre #1E1B2E…).
   ══════════════════════════════════════════════════════════════════════ */

.wr-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .wr-fiche { grid-template-columns: 1fr; }
}

/* ── En-tête ── */
.wr-fiche__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.wr-fiche__logo {
  width: 64px; height: 64px; flex: none;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  background: #FEF3C7; color: #B45309;
  overflow: hidden;
}
.wr-fiche__logo img { width: 100%; height: 100%; object-fit: cover; }
.wr-fiche__headmain { flex: 1; min-width: 0; }
.wr-fiche__titlerow { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.wr-fiche__title {
  margin: 0;
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--wr-ink, #1E1B2E);
  line-height: 1.15;
}
.wr-fiche__pulse {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%; background: #10B981;
  animation: wrFichePulse 2s infinite;
}
@keyframes wrFichePulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.wr-fiche__sub {
  font-size: 14.5px; font-weight: 500;
  color: var(--wr-muted, #6B7280);
}

/* Bouton like (pilule). Aimé = rouge plein. */
.wr-fiche__like {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 100px;
  padding: 11px 18px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; flex: none;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff; color: var(--wr-ink, #1E1B2E);
  transition: background .12s ease, border-color .12s ease;
}
.wr-fiche__like:hover { background: #F8F6FC; }
.wr-fiche__like.is-liked {
  background: #FEE2E2; color: #B91C1C; border-color: #FECACA;
}
.wr-fiche__like svg { flex: none; }

/* ── Score de correspondance (bloc vert) ── */
.wr-match {
  background: #ECFDF3; border: 1px solid #BBF7D0;
  border-radius: 18px; padding: 22px 24px; margin-bottom: 22px;
}
.wr-match__top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.wr-match__pct {
  font-size: 40px; font-weight: 800; letter-spacing: -.03em;
  color: #047857; line-height: 1;
}
.wr-match__pct span { font-size: 20px; }
.wr-match__label { font-size: 17px; font-weight: 800; color: #065F46; }
.wr-match__hint { font-size: 13px; color: #047857; }
.wr-match__bar {
  height: 8px; background: #D1FAE5; border-radius: 100px; overflow: hidden;
}
.wr-match__fill { height: 100%; background: #10B981; border-radius: 100px; }

/* ── Badges (pilules) ── */
.wr-fiche__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.wr-fiche__badge {
  font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 100px;
  background: #F1F5F9; color: #475569;
}
.wr-fiche__badge--violet { background: #F2EDFA; color: #8A63C1; }
.wr-fiche__badge--blue { background: #DBEAFE; color: #1E40AF; }

/* ── Sections de contenu ── */
.wr-fiche__section { margin-bottom: 26px; }
.wr-fiche__section h2 {
  margin: 0 0 10px;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--wr-ink, #1E1B2E);
}
.wr-fiche__section .wr-prose,
.wr-fiche__section p {
  margin: 0;
  font-size: 14.5px; line-height: 1.65;
  color: #374151;
}
.wr-fiche__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-fiche__chip {
  font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 100px;
  background: #F2EDFA; color: #8A63C1;
}
.wr-fiche__chip--ghost { background: #F1F5F9; color: #475569; }

/* ══════════════════ ASIDE ══════════════════ */
.wr-fiche__aside {
  position: sticky; top: 88px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 6px 22px rgba(30, 27, 46, .05);
}
@media (max-width: 900px) { .wr-fiche__aside { position: static; } }

/* Lignes de détails (Type de contrat / Niveau / Télétravail / Salaire). */
.wr-fiche__rows { margin: 0 0 18px; }
.wr-fiche__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  font-size: 13.5px; color: var(--wr-muted, #6B7280);
  border-top: 1px solid #F2F4F8;
}
.wr-fiche__row:first-child { border-top: 0; }
.wr-fiche__row strong { font-size: 14px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }

/* Card recruteur. */
.wr-recruiter {
  display: flex; align-items: center; gap: 10px;
  background: #F8F4FD; border-radius: 12px;
  padding: 11px 13px; margin: 16px 0;
}
.wr-recruiter__avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: #DBEAFE; color: #1E40AF;
  position: relative;
  overflow: visible;
}
.wr-recruiter__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wr-recruiter__online {
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #10B981; border: 2px solid #F8F4FD;
}
.wr-recruiter__name { font-size: 12.5px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-recruiter__status { font-size: 11px; color: #10B981; }

/* Boutons empilés de l'aside. */
.wr-fiche__actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.wr-fiche__btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 100px;
  padding: 12px 16px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-align: center;
  border: 1px solid transparent;
  transition: transform .1s ease, background .12s ease, border-color .12s ease;
}
.wr-fiche__btn:hover { transform: translateY(-1px); }
.wr-fiche__btn svg { flex: none; }
.wr-fiche__btn--primary { background: #8A63C1; color: #fff; }
.wr-fiche__btn--primary:hover { background: #764FB0; }
.wr-fiche__btn--outline {
  background: #fff; color: var(--wr-ink, #1E1B2E);
  border-color: var(--wr-line, #E5E7EB);
}
.wr-fiche__btn--outline:hover { background: #F8F6FC; border-color: #E4D9F5; }
.wr-fiche__btn--ghost { background: #F1F5F9; color: #475569; }
.wr-fiche__btn--ghost:hover { background: #E9EDF3; }

/* Barre de recherche live en haut de la fiche. */
.wr-fiche-search { margin-bottom: 24px; }

/* La fiche remonte : pas de grand vide en haut. La section applique 80px
   par défaut ; ici le shell fournit déjà l'air en haut (padding 24px), et la
   sidebar de gauche commence à ce niveau. On aligne le contenu dessus. */
.wr-section--fiche { padding-top: 0; }