/* ══════════════════════════════════════════════════════════════════════
   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__headlink` : la même pastille que le favori, pour un lien
   d'en-tête (« Sur la carte ») — sans état « aimé ». */
.wr-fiche__like,
.wr-fiche__headlink {
  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,
.wr-fiche__headlink:hover { background: #F8F6FC; }
.wr-fiche__headlink { text-decoration: none; }
.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; }

/* ── Partager la fiche ──────────────────────────────────────────────────
   Sous les actions de l'aside : une ligne de pastilles rondes, une par
   réseau, puis deux boutons à libellé (copier, partage natif). Le tout
   reste discret — c'est un service, pas un appel à l'action. */
.wr-share { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wr-line); }
.wr-share__title {
  display: block; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wr-muted);
}
.wr-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wr-share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 36px; height: 36px; padding: 0 11px;
  border-radius: var(--wr-r-pill);
  border: 1px solid var(--wr-line);
  background: var(--wr-card); color: var(--wr-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background var(--wr-t), border-color var(--wr-t), color var(--wr-t);
}
.wr-share__btn svg { flex: none; }
/* Les deux boutons à libellé (copier, partage natif) : un peu plus d'air
   autour du texte que les pastilles rondes des réseaux. */
.wr-share__btn--text { padding: 0 13px 0 11px; }
.wr-share__btn:hover,
.wr-share__btn:focus-visible { background: var(--wr-violet-soft); border-color: var(--wr-violet); color: var(--wr-violet); }
.wr-share__btn.is-done { background: var(--wr-violet-soft); border-color: var(--wr-violet); color: var(--wr-violet); }

/* Boutons empilés de l'aside. */
.wr-fiche__actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

/* « Candidater » verrouillé (visiteur) : gris, cadenas, mène à la connexion. */
.wr-fiche__btn--locked {
  background: var(--wr-bg-2); color: var(--wr-muted);
  border: 1px dashed var(--wr-line-2);
}
.wr-fiche__btn--locked:hover { background: var(--wr-violet-soft); color: var(--wr-violet); border-color: var(--wr-violet); }

/* Le nombre d'offres, en pastille dans le bouton « Offres à pourvoir ». */
.wr-fiche__btncount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  border-radius: 100px;
  background: var(--wr-violet-soft); color: var(--wr-violet);
  font-size: 11.5px; font-weight: 700; line-height: 1;
}

/* ⚠️  LE FAVORI EST UN `<button>` DANS UN `<form>`, « CANDIDATER » UN `<a>`.

   Le lien, enfant direct de la colonne flex, s'étire sur toute la largeur.
   Le bouton, lui, vit dans un formulaire : le formulaire s'étire, mais un
   `<button>` garde sa largeur de contenu — d'où deux boutons de largeurs
   différentes l'un sous l'autre. Le formulaire devient une colonne flex à
   son tour (il porte aussi le message d'erreur du favori, sous le bouton),
   et tout bouton de la pile prend 100 %. */
.wr-fiche__actions .wr-fiche__form { display: flex; flex-direction: column; gap: 9px; }
.wr-fiche__actions .wr-fiche__btn { width: 100%; }
.wr-fiche__actions .wr-fiche__note--erreur { margin-top: 0; }
.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; }

/* « Dans mes favoris » : l'état atteint. Rouge doux, cœur plein — on voit
   d'un coup d'œil que c'est fait, et le bouton reste cliquable pour retirer. */
.wr-fiche__btn--liked { background: #FEE2E2; color: #B91C1C; }
.wr-fiche__btn--liked:hover { background: #FECACA; }

/* « Postuler » : second geste, moins lourd que le favori mais plus visible
   qu'un fantôme — c'est un lien sortant vers la candidature. */
.wr-fiche__btn--secondary { background: #fff; color: #1E1B2E; border: 1.5px solid #1E1B2E; }
.wr-fiche__btn--secondary:hover { background: #1E1B2E; color: #fff; }
.wr-fiche__btn--ghost:hover { background: #E9EDF3; }

/* « Candidature envoyée » : l'état atteint, en vert doux, coche à la place
   de l'avion. Comme le favori, il reste cliquable — il rouvre la modale. */
.wr-fiche__btn--secondary.wr-fiche__btn--applied {
  background: #ECFDF5; color: #047857; border-color: #A7F3D0;
}
.wr-fiche__btn--secondary.wr-fiche__btn--applied:hover { background: #D1FAE5; color: #065F46; }

/* La date de l'envoi et le lien vers la liste, sous le bouton : une ligne,
   pas une card — c'est une précision du bouton, pas un message. */
.wr-fiche__actions .wr-fiche__note--applied {
  margin: -3px 0 2px;
  padding: 0;
  background: none;
  border: 0;
  text-align: center;
  font-size: 12.5px;
}
.wr-fiche__note--applied a { color: var(--wr-violet, #8A63C1); font-weight: 600; text-decoration: none; }
.wr-fiche__note--applied a:hover { text-decoration: underline; }

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

/* Visiteur : la valeur n'est pas dans la page — on dit qu'elle existe et
   comment la voir. Même chose dans la colonne de droite (`__rowlocked`). */
.wr-infos__value--locked { color: var(--wr-muted); font-style: italic; font-weight: 500; }
.wr-infos__value--locked a { color: var(--wr-violet); font-style: normal; font-weight: 600; text-decoration: none; }
.wr-infos__value--locked a:hover { text-decoration: underline; }
.wr-fiche__rowlocked { color: var(--wr-violet); font-size: 12.5px; font-weight: 600; font-style: italic; text-decoration: none; }
.wr-fiche__rowlocked:hover { text-decoration: underline; }

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

/* ══════════════════════════════════════════════════════════════════════
   « DÉJÀ INSCRIT ? » sous le formulaire de la fiche offre

   Reprend la forme de la carte entreprise : un bouton plutôt qu'un lien en
   fin de phrase, précédé d'un séparateur qui marque le changement de
   chemin.
   ══════════════════════════════════════════════════════════════════════ */
.wr-jobsignup__sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
}

.wr-jobsignup__sep > span {
  flex: 1;
  height: 1px;
  background: var(--wr-line, #EEF1F7);
}

.wr-jobsignup__sep em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wr-muted, #6B7280);
}

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

.wr-jobsignup__foottxt { margin: 0 0 10px; }

/* ⚠️  PLEINE LARGEUR, COMME LE BOUTON D'INSCRIPTION AU-DESSUS.

   Un bouton étroit centré sous un bouton pleine largeur se lit comme
   secondaire au point d'être facultatif. Ici les deux chemins sont
   équivalents : on s'inscrit OU on se connecte. La hiérarchie se joue sur
   la couleur — plein contre contour — pas sur la taille. */
.wr-jobsignup__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.wr-jobsignup__login svg { width: 16px; height: 16px; flex: none; }

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

/* ══════════════════════════════════════════════════════════════════════
   COORDONNÉES RÉSERVÉES (wr-coord-lock)

   Remplace le bloc « Infos pratiques » pour un visiteur. Il annonce ce qui
   existe plutôt que de laisser croire que l'entreprise n'a rien renseigné —
   sans quoi personne ne chercherait plus loin.

   ⚠️  SOBRE, PAS ALARMANT.

   Ce n'est pas une erreur ni un refus : c'est une invitation. Un bloc rouge
   ou un cadenas géant donnerait l'impression d'avoir fait quelque chose de
   mal en arrivant sur une fiche publique.
   ══════════════════════════════════════════════════════════════════════ */
.wr-coord-lock { text-align: center; }

.wr-coord-lock__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin: 0 auto 12px;
  border-radius: var(--wr-r-md, 12px);
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
}
.wr-coord-lock__icon svg { width: 20px; height: 20px; }

.wr-coord-lock__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wr-ink, #1E1B2E);
}

.wr-coord-lock__text {
  margin: 0 auto 16px;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wr-ink-2, #374151);
}

.wr-coord-lock__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Sur mobile, deux boutons côte à côte deviennent illisibles. */
@media (max-width: 520px) {
  .wr-coord-lock__actions .wr-btn { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️  `.wr-fiche__main` N'AVAIT AUCUNE RÈGLE — ET C'EST LA COLONNE PRINCIPALE.

   Elle porte tout le contenu des deux fiches, et n'était stylée nulle part.
   Dans une grille, un enfant prend par défaut la largeur de son CONTENU :
   une description d'offre avec une URL longue élargissait donc la colonne,
   qui élargissait la grille, qui faisait glisser la page entière.

   `min-width: 0` l'autorise à rétrécir. C'est une ligne, et c'est la cause
   la plus fréquente d'un débordement qu'on n'explique pas : tout semble
   correct, et pourtant la page défile latéralement.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-fiche__main { min-width: 0; }

/* ⚠️  LA GRILLE ELLE-MÊME DOIT POUVOIR RÉTRÉCIR.

   `.wr-fiche` est un enfant de `.wr-container`, lui-même dans la grille de
   la coquille. Sans `min-width: 0`, elle prend la largeur de son contenu :
   la chaîne se rompt au premier maillon qui l'oublie, et tous les autres
   ne servent à rien.

   C'est ce qui produisait l'effet observé : le texte n'était pas replié
   mais COUPÉ, parce que `wr-mobile.css` pose `overflow-x: hidden` sur
   `.wr-shell__main`. Cette règle masque le débordement au lieu de
   l'empêcher — elle évite que la page défile latéralement, au prix du
   texte qui disparaît sous le bord droit. */
.wr-fiche { min-width: 0; }

/* Même raison, un cran plus haut : la section porte la grille. */
.wr-section--fiche { min-width: 0; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════════════
   FICHES OFFRE ET ENTREPRISE — TÉLÉPHONE

   ⚠️  CE FICHIER N'AVAIT QUE TROIS BREAKPOINTS POUR DEUX PAGES ENTIÈRES.

   Un seul repliait la grille à 900 px ; les deux autres traitaient la carte
   et un bouton. Tout le reste gardait ses valeurs de bureau : un titre à
   30 px, des gouttières de 32 px, et treize rangées `flex` sans
   `flex-wrap` — chacune poussant la page dès que son contenu dépasse.

   La grille se repliait donc correctement pendant que son CONTENU
   débordait. C'est ce qui donne l'impression d'une page « pas responsive »
   alors que la mise en page, elle, fonctionne.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── Titres et espacements ────────────────────────────────────────────
     Un titre à 30 px sur un écran de 360 px passe sur quatre lignes et
     repousse tout le reste sous la ligne de flottaison. */
  .wr-fiche { gap: 18px; }
  .wr-fiche__title { font-size: 21px; line-height: 1.25; }
  .wr-fiche__logo { width: 46px; height: 46px; font-size: 18px; }
  .wr-fiche__emptycard { padding: 22px 14px; }
  .wr-match__pct { font-size: 30px; }

  /* ── Les rangées qui débordent ────────────────────────────────────────

     ⚠️  `flex-wrap` PLUTÔT QUE `flex-direction: column`.

     Passer en colonne empilerait aussi les éléments qui tiennent très bien
     côte à côte — un logo de 46 px et un titre court. `wrap` ne renvoie à
     la ligne que ce qui ne rentre pas : la mise en page reste dense quand
     elle le peut, et cède seulement quand il le faut. */
  .wr-fiche__head,
  .wr-fiche__titlerow,
  .wr-fiche__sectionhead,
  .wr-fiche__cardtitle,
  .wr-fiche__source,
  .wr-jobsignup__head,
  .wr-match__top {
    flex-wrap: wrap;
  }

  /* ⚠️  `min-width: 0` SUR LES ENFANTS FLEX.

     Un élément flex refuse de descendre sous la largeur de son contenu :
     un nom d'entreprise long garde sa largeur naturelle et pousse la
     rangée, `flex-wrap` ou non. C'est la règle qui manque le plus souvent
     quand « ça déborde sans raison ». */
  .wr-fiche__head > *,
  .wr-fiche__titlerow > *,
  .wr-infos__item > * {
    min-width: 0;
  }

  /* ── Les lignes libellé / valeur ──────────────────────────────────────
     Sur deux colonnes, il ne reste rien pour la valeur : une adresse de
     courriel se coupe caractère par caractère. On empile. */
  .wr-fiche__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .wr-fiche__rowlabel {
    /* Elle était en `nowrap` : sur une ligne empilée, plus besoin, et le
       garder tronquerait un libellé long. */
    white-space: normal;
  }

  /* ── Boutons ─────────────────────────────────────────────────────────
     Deux boutons côte à côte à 360 px donnent deux libellés coupés. */
  .wr-fiche__btn { width: 100%; justify-content: center; }

  /* ── Le bouton « Enregistrer » ────────────────────────────────────────

     ⚠️  `flex: none` L'EMPÊCHAIT DE RÉTRÉCIR.

     Sur la fiche entreprise, il est dans la même rangée que le logo et le
     titre. Avec `flex: none`, il garde sa largeur naturelle et pousse la
     rangée au-delà de l'écran — puis `overflow-x: hidden` le coupe en
     deux : on voyait « ♡ Sa ».

     `flex-wrap` seul ne suffisait pas : il faut aussi que le bouton
     accepte de passer à la ligne, donc qu'il puisse occuper toute la
     largeur une fois seul sur la sienne. */
  .wr-fiche__like {
    flex: 1 1 100%;
    justify-content: center;
    padding: 10px 14px;
  }

  /* ── Colonne latérale ────────────────────────────────────────────────
     Elle passe sous le contenu (grille repliée à 900 px) : ses marges de
     bureau y créent un vide de 32 px au milieu de la page. */
  .wr-fiche__aside { margin-top: 4px; }
}

/* ⚠️  UN SECOND PALIER POUR LES TRÈS PETITS ÉCRANS.

   Sous 400 px — iPhone SE, Android d'entrée de gamme —, même 21 px est
   trop pour un intitulé de poste, qui fait souvent huit mots. */
@media (max-width: 400px) {
  .wr-fiche__title { font-size: 19px; }
  .wr-fiche__card { padding: 16px 14px; }
  .wr-infos { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LES OFFRES DE LA FICHE ENTREPRISE — DIX PAR PAGE, SANS RECHARGER

   La liste et sa pagination sont remplacées ensemble par
   wr-fiche-offres.js (partial wr-fiche-offres). La pagination reprend
   `.wr-pager` (wr-pages.css), en boutons, resserrée pour tenir dans la
   carte.
   ══════════════════════════════════════════════════════════════════════ */
.wr-fiche-offres { margin-top: 6px; }
.wr-fiche-offres__liste { display: grid; gap: 12px; }
.wr-fiche-offres__liste:focus { outline: none; }

.wr-fiche-offres__pager .wr-pager { margin-top: 18px; flex-wrap: wrap; }
.wr-fiche-offres__pager .wr-pager__total { margin-top: 8px; }

/* ⚠️  SANS SCRIPT, PAS DE PAGINATION : ses boutons ne mèneraient nulle
   part. La carte dit alors « les 10 plus récentes sur N » (noscript). */
.wr-fiche-offres:not(.is-pret) .wr-fiche-offres__pager { display: none; }

/* Des boutons qui doivent ressembler aux liens des autres listes. */
.wr-fiche-offres button.wr-pager__btn,
.wr-fiche-offres button.wr-pager__num {
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}
.wr-fiche-offres button.wr-pager__btn:focus-visible,
.wr-fiche-offres button.wr-pager__num:focus-visible {
  outline: 2px solid var(--wr-violet, #8A63C1);
  outline-offset: 2px;
}

/* Pendant le chargement : la liste reste, atténuée — pas de carte vide. */
.wr-fiche-offres.is-chargement .wr-fiche-offres__liste {
  opacity: .45;
  transition: opacity .15s;
}
.wr-fiche-offres.is-chargement .wr-fiche-offres__liste,
.wr-fiche-offres.is-chargement .wr-pager { pointer-events: none; }

.wr-fiche-offres__erreur {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  font-size: 13px;
}
.wr-fiche-offres__reessayer {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Sur téléphone, « Précédent » et « Suivant » ne gardent que leur flèche :
   la carte fait 330 px, les numéros passent avant les mots. Le texte reste
   lu par les lecteurs d'écran (taille nulle, pas masqué). */
@media (max-width: 520px) {
  .wr-fiche-offres__pager .wr-pager { gap: 6px; }
  .wr-fiche-offres__pager .wr-pager__btn {
    font-size: 0;
    gap: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    justify-content: center;
  }
  .wr-fiche-offres__pager .wr-pager__nums { gap: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PLAQUETTE ET IMAGES À PARTAGER — views/partials/wr-share-visuels.ejs
   Sur les fiches (événement, offre) : l'image en petit (si fournie), puis
   « Plaquette PDF », « Image Instagram », « Image TikTok ».
   ══════════════════════════════════════════════════════════════════════ */
.wr-visuels { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.wr-visuels__apercu {
  display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #EEE8F8, #E2D8F3);
  box-shadow: 0 6px 20px rgba(30, 27, 46, .12);
}
.wr-visuels__apercu img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.wr-visuels__apercu.est-pret img { opacity: 1; }
.wr-visuels__liens { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-visuels__lien {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--wr-border, #E4DEEF); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--wr-text, #1E1B2E); text-decoration: none;
}
.wr-visuels__lien svg { width: 16px; height: 16px; flex: none; color: var(--wr-violet, #8A63C1); }
.wr-visuels__lien:hover { border-color: var(--wr-violet, #8A63C1); color: var(--wr-violet-dark, #6B47A6); }
.wr-fiche__visuels { margin: 18px 0 4px; }
.wr-fiche__visuels .wr-share__title { display: block; margin-bottom: 10px; }