/* ══════════════════════════════════════════════════════════════════════
   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; }
/* ⚠️  4 px SOUS UN TITRE DE 30 px, C'EST COLLÉ.

   La proportion compte plus que la valeur : sous un titre de cette taille,
   quatre pixels se lisent comme zéro. La provenance et le lieu venaient se
   coller dessous, sans respiration.

   Dix pixels suffisent — assez pour séparer, pas assez pour détacher. */
.wr-fiche__titlerow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.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); }
}
/* Le sous-titre n'avait aucune marge : il touchait la ligne de provenance
   juste au-dessus. Les deux disent des choses différentes — d'où vient
   l'offre, et où elle se situe. */
.wr-fiche__sub {
  margin: 6px 0 0;
  font-size: 14.5px; font-weight: 500;
  color: var(--wr-muted, #6B7280);
  line-height: 1.5;
}

/* 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);
}

/* En-tête de section : le titre, et le nombre d'offres à côté plutôt que
   DANS le titre. Un intitulé qui change de forme selon le contenu
   (« 1 poste ouvert » / « 3 postes ouverts ») ne se repère plus d'une fiche
   à l'autre. Le titre reste fixe, le compte devient une donnée. */
.wr-fiche__sectionhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wr-fiche__sectionhead h2 { margin: 0; }

.wr-fiche__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 100px;
  background: rgba(138, 99, 193, .1);
  color: var(--wr-violet, #8A63C1);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

/* L'état vide, encadré comme une rangée d'offre. Sans cadre, le message
   flottait dans le blanc et donnait l'impression d'une page inachevée
   plutôt que d'une information. */
.wr-fiche__emptycard {
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  background: #fff;
  margin-top: 6px;
}
/* La marge basse du dernier élément viendrait s'ajouter au fond de la
   carte : le padding paraîtrait déséquilibré. */
.wr-fiche__emptycard .wr-empty { padding: 34px 20px; }
.wr-fiche__emptycard .wr-empty__hint { margin-bottom: 0; }
.wr-fiche__emptycard .wr-empty__hint:not(:last-child) { margin-bottom: 16px; }
.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; }
/* ══════════════════════════════════════════════════════════════════════
   ⚠️  `align-items: center` CASSAIT LES VALEURS LONGUES.

   « Remote/Hybrid (US-based), United States » tient sur deux lignes. Avec
   un alignement centré, le libellé « Ville » se plaçait à mi-hauteur de ces
   deux lignes — il flottait, et l'on ne voyait plus à quoi il se
   rapportait.

   ⚠️  ET IL N'Y AVAIT AUCUN `gap`.

   `justify-content: space-between` suffit tant que le texte est court ;
   dès que la valeur remplit la ligne, elle vient toucher le libellé.

   Alignement en haut, écart minimal garanti, valeur alignée à droite :
   la ligne se lit même sur trois lignes de contenu.
   ══════════════════════════════════════════════════════════════════════ */
.wr-fiche__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  font-size: 13.5px; color: var(--wr-muted, #6B7280);
  border-top: 1px solid #F2F4F8;
  line-height: 1.45;
}
.wr-fiche__row:first-child { border-top: 0; }

/* ⚠️  LE LIBELLÉ NE DOIT JAMAIS SE COUPER.

   Il était du texte nu dans la ligne : rien ne l'empêchait de se replier
   sur deux lignes quand la valeur prenait toute la place, ce qui donnait
   « Télé- / travail » collé à sa valeur.

   `flex: none` le garde entier ; c'est la VALEUR qui se replie, et c'est
   elle qui a de la place pour le faire. */
.wr-fiche__rowlabel {
  flex: none;
  white-space: nowrap;
}

.wr-fiche__row strong {
  font-size: 14px; font-weight: 700; color: var(--wr-ink, #1E1B2E);

  /* `min-width: 0` autorise le retour à la ligne DANS le conteneur flex :
     sans lui, un texte long pousse la boîte au lieu de se replier, et la
     card déborde de la colonne. */
  min-width: 0;
  text-align: right;

  /* `anywhere` plutôt que `break-word` : une URL ou un nom sans espace —
     « Remote/Hybrid(US-based) » — ne se coupe pas autrement, et sortirait
     de la card. */
  overflow-wrap: anywhere;
}

/* 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; }

/* ══════════════════════════════════════════════════════════════════════
   LES SECTIONS EN CARDS (wr-fiche__card)

   ⚠️  UNE SEULE VERTICALE POUR TOUTE LA COLONNE.

   L'en-tête et les badges flottaient au bord du conteneur pendant que le
   contenu était encadré : le nom de l'entreprise commençait 22 px à
   gauche du texte qu'il annonce. Deux alignements sur la même colonne se
   lisent comme un défaut de gabarit, pas comme une intention.

   Tout passe donc en card — en-tête compris. Le fond de page n'est pas
   blanc (`--wr-bg`), c'est ce qui rend les cards visibles.
   ══════════════════════════════════════════════════════════════════════ */
.wr-fiche__card {
  background: var(--wr-card, #FFFFFF);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-xl, 18px);
  padding: 22px;
  margin-bottom: 16px;
}

/* La dernière card ne pousse pas la page : la marge du bas viendrait
   s'ajouter au padding de la section. */
.wr-fiche__card:last-child { margin-bottom: 0; }

/* Un bloc qui porte DÉJÀ son propre cadre — le formulaire d'intérêt et sa
   bordure violette. Il ne prend que le rythme vertical, pas le cadre :
   deux bordures à trois pixels l'une de l'autre se voient. */
.wr-fiche__block { margin-bottom: 16px; }
.wr-fiche__block:last-child { margin-bottom: 0; }

/* L'en-tête porte déjà ses propres marges internes (logo 64px, titre
   30px) : le padding de la card suffit, la marge basse du bloc ferait
   double emploi. */
.wr-fiche__card--head .wr-fiche__head { margin-bottom: 16px; }
.wr-fiche__card--head .wr-fiche__badges { margin-bottom: 0; }

/* Le titre de card : une pastille d'icône, puis l'intitulé. La pastille
   n'est pas décorative — elle donne au regard un point d'entrée constant
   d'une section à l'autre. */
.wr-fiche__cardtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink, #1E1B2E);
}

/* ⚠️  LA COULEUR DE L'ICÔNE N'EST PAS UN TOKEN `line`.

   `--wr-line` est une couleur de trait : posée sur un SVG en
   `currentColor`, elle donne une icône invisible sur fond blanc. */
.wr-fiche__cardicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--wr-r-sm, 10px);
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
}
.wr-fiche__cardicon svg { width: 16px; height: 16px; }

/* Le titre de section vit maintenant dans un en-tête de card : sa marge
   basse d'origine s'ajouterait à celle du titre. */
.wr-fiche__card .wr-fiche__sectionhead { margin-bottom: 14px; }
.wr-fiche__card .wr-fiche__sectionhead .wr-fiche__cardtitle { margin-bottom: 0; }

/* ══════════════════ INFOS PRATIQUES ══════════════════
   Adresse, e-mail, téléphone — trois tuiles côte à côte plutôt qu'une
   liste : on cherche l'une OU l'autre, jamais les trois à la suite.

   La grille se replie d'elle-même sous 460 px de large disponible :
   `auto-fit` + `minmax` évitent une seconde règle de media query, et la
   fiche vit dans une colonne dont la largeur dépend de l'aside. */
.wr-infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

/* ⚠️  LES TUILES SONT DANS UNE CARD : FOND EN RETRAIT, PAS BLANC.

   Blanches sur une card blanche, seules leurs bordures les distinguaient
   — trois cadres dans un cadre, pour un seul sujet. `--wr-bg-2` les
   pose en léger retrait : elles se lisent comme le contenu de la card,
   pas comme trois cards de plus. */
.wr-infos__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-lg, 14px);
  background: var(--wr-bg-2, #F4F6FB);
}

/* ⚠️  LA COULEUR DE L'ICÔNE N'EST PAS UN TOKEN `line`.

   `--wr-line` est une couleur de trait : posée sur un SVG en
   `currentColor`, elle donne une icône invisible sur fond blanc. */
.wr-infos__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--wr-r-md, 12px);
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
}

.wr-infos__body { min-width: 0; }

.wr-infos__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--wr-muted, #6B7280);
  margin-bottom: 3px;
}

/* `anywhere` : une adresse e-mail longue ou une rue sans espace
   sortirait de la tuile autrement. */
.wr-infos__value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wr-ink, #1E1B2E);
  overflow-wrap: anywhere;
}

.wr-infos__value--link { color: var(--wr-violet, #8A63C1); }
.wr-infos__value--link:hover { color: var(--wr-violet-dark, #6B47A6); }

/* L'adresse en pied de card : une précision, pas une ligne de tableau. */
.wr-fiche__addr {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
  font-size: 13px;
  line-height: 1.5;
  color: var(--wr-muted, #6B7280);
}

/* Une valeur cliquable dans les lignes de l'aside garde le poids du
   texte fort, mais prend la couleur de marque : sans ça, rien ne dit
   qu'un e-mail ou un téléphone se clique. */
.wr-fiche__row strong a { color: var(--wr-violet, #8A63C1); }
.wr-fiche__row strong a:hover { color: var(--wr-violet-dark, #6B47A6); }

/* 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; }

/* Provenance d'une offre reprise d'un site externe. Discrète : c'est une
   précision, pas un avertissement — l'offre est légitime, seule la
   candidature se passe ailleurs. */
.wr-fiche__source {
  display: flex; align-items: center; gap: 7px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--wr-muted, #6B7280);
}
.wr-fiche__source svg { flex: none; }

/* ══════════════════════════════════════════════════════════════════════
   INSCRIPTION SUR LA FICHE D'OFFRE (wr-jobsignup)

   Le formulaire qui remplace le bouton « Inscrivez-vous » pour un
   visiteur anonyme. Il occupe la place que prendraient les sections
   réservées — missions, profil, avantages — plutôt que de flotter en bas
   de page comme une bannière.

   ⚠️  IL NE CRIE PAS.

   Un dégradé violet pleine largeur en ferait une publicité au milieu
   d'une annonce qu'on est en train de lire. Une card claire, bordée de
   violet clair : on la remarque, elle n'interrompt pas.
   ══════════════════════════════════════════════════════════════════════ */
.wr-jobsignup {
  background: var(--wr-violet-softer, #F8F4FD);
  border: 1px solid var(--wr-violet-2, #A98AD3);
  border-radius: var(--wr-r-xl, 18px);
  padding: 24px;
  margin-bottom: 26px;
}

.wr-jobsignup__head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
}

/* ⚠️  PAS DE TOKEN `line` SUR UNE ICÔNE.

   `--wr-line` est une couleur de trait : posée sur un SVG en
   `currentColor`, elle donne une icône invisible. */
.wr-jobsignup__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--wr-r-md, 12px);
  background: var(--wr-violet, #8A63C1);
  color: #fff;
}
.wr-jobsignup__icon svg { width: 19px; height: 19px; }

.wr-jobsignup__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink, #1E1B2E);
}

.wr-jobsignup__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wr-ink-2, #374151);
}

/* Les champs sont sur fond lavande : le blanc les détache, sinon ils se
   confondent avec la card. */
.wr-jobsignup .wr-input,
.wr-jobsignup .wr-auth__choice {
  background: var(--wr-card, #FFFFFF);
}

.wr-jobsignup__foot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--wr-muted, #6B7280);
}

/* ══════════════════ LOGO DANS L'ASIDE ══════════════════
   Affiché seulement quand l'entreprise en a un vrai (voir la vue) :
   répéter les initiales en grand remplirait la colonne sans rien
   apprendre.

   `contain` et non `cover` : un logo est une marque, pas une photo. Le
   recadrer couperait un mot ou un symbole — exactement ce qu'il ne faut
   pas faire à une identité visuelle. */
.wr-fiche__asidelogo {
  display: grid;
  place-items: center;
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-lg, 14px);
  background: var(--wr-card, #FFFFFF);
}

.wr-fiche__asidelogo img {
  max-width: 100%;
  max-height: 78px;
  object-fit: contain;
}

/* ══════════════════ CARTE OPENSTREETMAP ══════════════════
   Un rapport 16/10 réservé AVANT le chargement : sans hauteur fixée,
   l'iframe arrive après le reste et pousse tout ce qui la suit vers le
   bas — le lecteur perd sa ligne au moment où la carte apparaît. */
.wr-map {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--wr-r-lg, 14px);
  overflow: hidden;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: var(--wr-bg-2, #F4F6FB);
}

.wr-map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wr-map__addr {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wr-ink-2, #374151);
}

.wr-map__link {
  margin: 6px 0 0;
  font-size: 13px;
}

/* Un rapport plus haut sur mobile : une carte de 16/10 sur 340 px de
   large devient une bande où l'on ne distingue plus rien. */
@media (max-width: 640px) {
  .wr-map { aspect-ratio: 4 / 3; }
}