/* ══════════════════════════════════════════════════════════════════════
   Whileresume — Styles spécifiques aux pages

   wr.css porte les tokens et les composants transverses.
   Ce fichier porte ce qui n'existe qu'à un endroit : le hero, les
   sections de la home, les gabarits d'annuaire.

   Il se remplit au fil des lots 2 à 5.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FLASH
   ══════════════════════════════════════════════════════════════════ */

.wr-flash {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--wr-r-md);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.wr-flash__icon { flex-shrink: 0; margin-top: 1px; }
.wr-flash__icon svg { width: 16px; height: 16px; }

/* Flash PLEINE LARGEUR — bandeau à 100 %, sans coins arrondis ni marges
   latérales. Rendu en tête de <main> (app) et de la vitrine. */
.wr-flash-wrap { width: 100%; }
.wr-flash--full {
  width: 100%;
  margin: 0 0 16px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding: 14px 24px;
  justify-content: center;
}

.wr-flash--success {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}
.wr-flash--error {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.wr-flash--warning {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.wr-flash--info {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1E40AF;
}

/* ══════════════════════════════════════════════════════════════════
   EN-TÊTE DE PAGE
   Le bandeau des pages internes (annuaires, listes). Plus sobre qu'un
   hero — ces pages sont des outils, pas des vitrines.
   ══════════════════════════════════════════════════════════════════ */

.wr-page-head {
  position: relative;
  padding: 48px 0 32px;
  overflow: hidden;
}

.wr-page-head__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.wr-page-head .wr-title { margin-bottom: 12px; }
.wr-page-head .wr-lede { margin-inline: auto; }

@media (max-width: 540px) {
  .wr-page-head { padding: 32px 0 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   TÊTE DE SECTION
   ══════════════════════════════════════════════════════════════════ */

.wr-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.wr-sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wr-sec-head .wr-eyebrow { margin-bottom: 14px; }

@media (max-width: 640px) {
  .wr-sec-head { margin-bottom: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */

.wr-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.wr-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--wr-r-sm);
  border: 1px solid var(--wr-line-2);
  background: var(--wr-card);
  color: var(--wr-ink-2);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--wr-t);
}
.wr-pager__btn:hover {
  border-color: var(--wr-violet-2);
  color: var(--wr-violet);
}
.wr-pager__btn svg { width: 14px; height: 14px; }

.wr-pager__info {
  font-size: 12.5px;
  color: var(--wr-muted);
  padding-inline: 12px;
}

/* ── Numéros de page ──────────────────────────────────────────────
   La bande de chiffres entre « précédent » et « suivant ». Elle se
   replie avant les boutons sur petit écran : le numéro exact importe
   moins que la possibilité d'avancer. */
.wr-pager__nums {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ⚠️  MÊME BOÎTE POUR LE LIEN ET POUR LA PAGE COURANTE.

   La page courante est un `<span>`, pas un `<a>` — mais elle doit
   occuper exactement la même place, sinon la bande de chiffres se
   décale d'un pixel à chaque changement de page. D'où `min-width` et
   `place-items` plutôt qu'un simple padding. */
.wr-pager__num {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding-inline: 8px;
  border-radius: var(--wr-r-sm);
  border: 1px solid var(--wr-line-2);
  background: var(--wr-card);
  color: var(--wr-ink-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--wr-t), color var(--wr-t), background var(--wr-t);
}

.wr-pager__num:hover {
  border-color: var(--wr-violet-2);
  color: var(--wr-violet);
}

.wr-pager__num.is-current {
  background: var(--wr-violet);
  border-color: var(--wr-violet);
  color: #fff;
  cursor: default;
}

/* L'ellipse n'est pas un bouton : ni bordure, ni survol. Elle dit
   « il y a des pages ici », rien de plus. */
.wr-pager__gap {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 36px;
  color: var(--wr-muted-2);
  font-size: 13px;
}

.wr-pager__total {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--wr-muted);
}

@media (max-width: 640px) {
  /* Sur mobile, « dernière » disparaît : les numéros la rendent
     atteignable, et quatre boutons sur une ligne ne tiennent pas. */
  .wr-pager__btn--last { display: none; }
  .wr-pager__num { min-width: 32px; height: 32px; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */

.wr-hero {
  position: relative;
  padding: 24px 0 0;
  overflow: hidden;
}

.wr-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 48px;
}

.wr-hero .wr-eyebrow { margin-bottom: 24px; }

.wr-hero .wr-h1 {
  max-width: 900px;
  margin: 0 auto 20px;
}

.wr-hero .wr-lede {
  margin: 0 auto 32px;
  text-align: center;
}

/* Le nom de la marque, dans le lede : violet, gras. Il ne s'agit pas
   d'un lien — juste d'un repère visuel. */
.wr-hero .wr-lede strong {
  color: var(--wr-violet);
  font-weight: 600;
}

/* ── Blobs du hero ──
   Plus grands que les blobs standards : le hero est vaste, un blob de
   320px s'y perdrait. */
.wr-hero .wr-blob--1 {
  width: 560px;
  height: 560px;
  top: -180px;
  right: -140px;
}

.wr-hero .wr-blob--2 {
  width: 480px;
  height: 480px;
  bottom: -160px;
  left: -120px;
}

/* ══════════════════════════════════════════════════════════════════
   MOTS-CLÉS POPULAIRES
   Sous le hero. Cliquer remplit la recherche — c'est un raccourci, pas
   un filtre : on ne veut pas que l'utilisateur ait à taper « développeur »
   pour la millionième fois.
   ══════════════════════════════════════════════════════════════════ */

.wr-populars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.wr-populars__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted-2);
  margin-right: 4px;
}

@media (max-width: 540px) {
  .wr-populars { gap: 6px; }
  .wr-populars__label { width: 100%; text-align: center; margin: 0 0 4px; }
}

/* ══════════════════════════════════════════════════════════════════
   BOUTONS STORES
   ══════════════════════════════════════════════════════════════════ */

.wr-stores {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.wr-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--wr-r-md);
  background: var(--wr-violet);
  color: #fff;
  transition: all var(--wr-t);
  box-shadow: 0 4px 14px rgba(138, 99, 193, .32);
}
.wr-store:hover {
  background: var(--wr-violet-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 99, 193, .4);
}

.wr-store svg { width: 22px; height: 22px; flex-shrink: 0; }

.wr-store__text { text-align: left; line-height: 1.2; }
.wr-store__small { display: block; font-size: 9.5px; opacity: .85; }
.wr-store__big { display: block; font-size: 13px; font-weight: 700; }

@media (max-width: 540px) {
  .wr-stores { flex-direction: column; }
  .wr-store { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   ICÔNES RONDES NOIRES — STORES DE L'ACCUEIL

   Des pastilles rondes noires (App Store / Google Play), URL éditables
   depuis le backoffice (cms_settings : app_ios_url / app_android_url).
   ══════════════════════════════════════════════════════════════════════ */
.wr-app-dots {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.wr-app-dot {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #111114;
  color: #fff;
  transition: transform var(--wr-t), background var(--wr-t), box-shadow var(--wr-t);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.wr-app-dot:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.wr-app-dot svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════════
   LISTE D'OFFRES DU HERO
   ══════════════════════════════════════════════════════════════════ */

.wr-hero-list { margin-top: 32px; }

.wr-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--wr-line);
}

/* Sans compteur à gauche, `space-between` collerait le lien « Tout voir »
   au bord gauche de la card. Ce modificateur le remet à droite, où il était.
   Voir `pages/home.ejs` pour la raison du retrait du compteur. */
.wr-list__head--right { justify-content: flex-end; }

.wr-list__count {
  font-size: 13.5px;
  color: var(--wr-muted);
}
.wr-list__count strong {
  color: var(--wr-ink);
  font-weight: 700;
}

/* La byline sous la liste : trois arguments, séparés par des points.
   Court, factuel — pas un slogan. */
.wr-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--wr-muted);
  flex-wrap: wrap;
}
.wr-byline strong { color: var(--wr-ink); font-weight: 700; }
.wr-byline span::after {
  content: '•';
  margin-left: 8px;
  color: var(--wr-muted-2);
}
.wr-byline span:last-child::after { content: none; }

/* ══════════════════════════════════════════════════════════════════
   LES TROIS PARCOURS
   ══════════════════════════════════════════════════════════════════ */

.wr-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wr-path {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-2xl);
  box-shadow: var(--wr-shadow);
  transition: all var(--wr-t);
}
.wr-path:hover {
  transform: translateY(-4px);
  box-shadow: var(--wr-shadow-hover);
  border-color: var(--wr-violet-2);
}

.wr-path__illu {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.wr-path__illu svg { width: 28px; height: 28px; }

/* Trois teintes différentes : les trois parcours ne se confondent pas. */
.wr-path:nth-child(1) .wr-path__illu { background: var(--wr-acc-violet); color: var(--wr-acc-violet-fg); }
.wr-path:nth-child(2) .wr-path__illu { background: var(--wr-acc-blue);   color: var(--wr-acc-blue-fg); }
.wr-path:nth-child(3) .wr-path__illu { background: var(--wr-acc-green);  color: var(--wr-acc-green-fg); }

.wr-path__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted-2);
  margin-bottom: 8px;
}

.wr-path__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--wr-ink);
  margin-bottom: 10px;
}

.wr-path__desc {
  font-size: 13.5px;
  color: var(--wr-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
}

@media (max-width: 991px) {
  .wr-paths { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   COMMENT ÇA MARCHE — la card crème

   La seule rupture chromatique de la charte. Toujours arrondie, jamais
   en pleine largeur : elle est posée SUR le fond, pas à la place du fond.
   ══════════════════════════════════════════════════════════════════ */

.wr-how {
  background: var(--wr-cream);
  border-radius: var(--wr-r-3xl);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}

.wr-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

.wr-how__step {
  text-align: center;
  padding-inline: 20px;
  position: relative;
}

/* Les filets verticaux entre les étapes. Pas de bordure sur le dernier —
   sinon il y aurait un trait dans le vide à droite. */
.wr-how__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  height: 60%;
  width: 1px;
  background: rgba(30, 27, 46, .08);
}

.wr-how__illu {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  display: grid;
  place-items: center;
  color: var(--wr-violet-dark);
}
.wr-how__illu svg { width: 30px; height: 30px; }

.wr-how__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 8px;
}

.wr-how__desc {
  font-size: 13.5px;
  color: var(--wr-ink-2);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .wr-how { padding: 36px 24px; }
  .wr-how__steps { grid-template-columns: 1fr; gap: 32px; }
  .wr-how__step::after { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FEATURES 01–04

   Alternées gauche/droite. Le numéro en gros, en violet pâle — un repère
   visuel qui structure la lecture sans crier.
   ══════════════════════════════════════════════════════════════════ */

.wr-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}
.wr-feat:last-child { margin-bottom: 0; }

/* Une feature sur deux inverse texte et image. */
.wr-feat:nth-child(even) .wr-feat__text { order: 2; }

.wr-feat__num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-violet-2);
  margin-bottom: 12px;
}

.wr-feat__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  margin-bottom: 14px;
  line-height: 1.2;
}

.wr-feat__desc {
  font-size: 15px;
  color: var(--wr-ink-2);
  line-height: 1.7;
  margin-bottom: 20px;
}

.wr-feat__list { display: grid; gap: 10px; }

.wr-feat__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--wr-ink-2);
}
.wr-feat__item svg {
  width: 16px;
  height: 16px;
  color: var(--wr-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.wr-feat__illu {
  aspect-ratio: 4 / 3;
  border-radius: var(--wr-r-2xl);
  background: var(--wr-violet-softer);
  display: grid;
  place-items: center;
  color: var(--wr-violet-2);
  position: relative;
  overflow: hidden;
}
.wr-feat__illu svg { width: 80px; height: 80px; }

@media (max-width: 991px) {
  .wr-feat {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 56px;
  }
  .wr-feat:nth-child(even) .wr-feat__text { order: 0; }
  .wr-feat__title { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   CARD D'INSCRIPTION
   ══════════════════════════════════════════════════════════════════ */

.wr-signup {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-5xl);
  padding: 48px;
  box-shadow: var(--wr-shadow);
  position: relative;
  overflow: hidden;
  max-width: 560px;
  margin-inline: auto;
}

.wr-signup__inner { position: relative; z-index: 1; }

.wr-signup__head { text-align: center; margin-bottom: 28px; }

.wr-signup__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  margin-bottom: 8px;
}

.wr-signup__sub {
  font-size: 14px;
  color: var(--wr-muted);
}

.wr-signup__perks {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-line);
}

@media (max-width: 540px) {
  .wr-signup { padding: 32px 24px; border-radius: var(--wr-r-3xl); }
  .wr-signup__title { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   APPS
   ══════════════════════════════════════════════════════════════════ */

.wr-apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.wr-apps__illu {
  aspect-ratio: 1;
  border-radius: var(--wr-r-3xl);
  background: linear-gradient(135deg, var(--wr-violet-softer), var(--wr-violet-soft));
  display: grid;
  place-items: center;
  color: var(--wr-violet);
}
.wr-apps__illu svg { width: 120px; height: 120px; }

@media (max-width: 991px) {
  .wr-apps { grid-template-columns: 1fr; gap: 32px; }
  .wr-apps__illu { max-width: 320px; margin-inline: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   CTA FINAL

   Le dégradé violet. Contient deux sous-cards blanches : un parcours
   candidat, un parcours recruteur. Sur la home business, l'ordre
   s'inverse — le recruteur passe en premier.
   ══════════════════════════════════════════════════════════════════ */

.wr-final {
  background: linear-gradient(135deg, #8A63C0, #9D7BCC);
  border-radius: var(--wr-r-4xl);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wr-final__inner { position: relative; z-index: 1; }

.wr-final__title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 12px;
}

.wr-final__lede {
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
  max-width: 520px;
  margin: 0 auto 40px;
}

.wr-final__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 760px;
  margin-inline: auto;
}

.wr-final__card {
  background: #fff;
  border-radius: var(--wr-r-2xl);
  padding: 28px 24px;
  text-align: left;
  transition: transform var(--wr-t);
}
.wr-final__card:hover { transform: translateY(-3px); }

.wr-final__card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--wr-r-md);
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.wr-final__card-icon svg { width: 20px; height: 20px; }

.wr-final__card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 6px;
}

.wr-final__card-desc {
  font-size: 13px;
  color: var(--wr-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Le décor du CTA : un blob blanc, très pâle. Il donne du relief sans
   distraire du message. */
.wr-final::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
  top: -140px;
  right: -100px;
  filter: blur(40px);
}

@media (max-width: 768px) {
  .wr-final { padding: 40px 24px; border-radius: var(--wr-r-3xl); }
  .wr-final__title { font-size: 26px; }
  .wr-final__cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   PRICING  (home business)
   ══════════════════════════════════════════════════════════════════ */

/* ⚠️  LE NOMBRE DE COLONNES SUIT LE NOMBRE D'OFFRES.

   Il était figé à deux. L'offre sur mesure ne s'affiche que si elle est
   remplie au backoffice : la grille doit donc tenir à deux comme à trois,
   sans qu'on ait à repasser dans le CSS. La largeur maximale s'élargit avec
   elle — trois cartes dans 760 px donneraient trois colonnes trop étroites
   pour leurs puces. */
.wr-pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  margin-inline: auto;
}

.wr-pricing--1 { grid-template-columns: 1fr; max-width: 400px; }
.wr-pricing--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.wr-pricing--3 { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }

.wr-price {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-2xl);
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all var(--wr-t);
}
.wr-price:hover {
  transform: translateY(-3px);
  box-shadow: var(--wr-shadow-hover);
}

/* Le plan mis en avant : bord violet, et un badge. Sans le bord, le
   badge ne suffirait pas — il faut que l'œil accroche la carte entière. */
.wr-price--featured {
  border-color: var(--wr-violet);
  box-shadow: 0 0 0 1px var(--wr-violet), var(--wr-shadow);
}

.wr-price__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-violet);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.wr-price__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 4px;
}

.wr-price__desc {
  font-size: 13px;
  color: var(--wr-muted);
  margin-bottom: 24px;
}

.wr-price__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.wr-price__value {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--wr-ink);
  line-height: 1;
}

/* Le prix barré : plus petit, gris. Il doit se voir sans voler la
   vedette au vrai prix. */
.wr-price__old {
  font-size: 18px;
  color: var(--wr-muted-2);
  text-decoration: line-through;
}

.wr-price__unit {
  font-size: 12.5px;
  color: var(--wr-muted);
  margin-bottom: 28px;
}

.wr-price__features {
  display: grid;
  gap: 11px;
  margin-bottom: 28px;
  flex: 1;
}

.wr-price__feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--wr-ink-2);
}
.wr-price__feature svg {
  width: 15px;
  height: 15px;
  color: var(--wr-violet);
  flex-shrink: 0;
  margin-top: 2px;
}

.wr-pricing__note {
  text-align: center;
  font-size: 12.5px;
  color: var(--wr-muted);
  margin-top: 20px;
}

/* ⚠️  TROIS COLONNES TOMBENT À DEUX AVANT DE TOMBER À UNE.

   Sous 1000 px, trois cartes deviennent illisibles ; à une seule colonne,
   on perd la comparaison, qui est la raison d'être de cette section. Le
   palier intermédiaire garde deux cartes côte à côte, la troisième passant
   dessous sur toute la largeur. */
@media (max-width: 1000px) {
  .wr-pricing--3 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .wr-pricing--3 > .wr-price:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .wr-pricing,
  .wr-pricing--1,
  .wr-pricing--2,
  .wr-pricing--3 { grid-template-columns: 1fr; max-width: 400px; }
  .wr-pricing--3 > .wr-price:last-child:nth-child(odd) { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   FAQ  (accordéons)
   ══════════════════════════════════════════════════════════════════ */

.wr-faq { max-width: 760px; margin-inline: auto; }

.wr-faq__item {
  border-bottom: 1px solid var(--wr-line);
}

.wr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--wr-ink);
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.wr-faq__q::-webkit-details-marker { display: none; }
.wr-faq__q:hover { color: var(--wr-violet); }

.wr-faq__chevron {
  width: 18px;
  height: 18px;
  color: var(--wr-muted);
  flex-shrink: 0;
  transition: transform var(--wr-t), color var(--wr-t);
}
.wr-faq__item[open] .wr-faq__chevron {
  transform: rotate(180deg);
  color: var(--wr-violet);
}

.wr-faq__a {
  padding: 0 0 20px;
  font-size: 14px;
  color: var(--wr-muted);
  line-height: 1.7;
  max-width: 90%;
}

/* ══════════════════════════════════════════════════════════════════
   COMPARAISON  (home business)
   ══════════════════════════════════════════════════════════════════ */

.wr-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin-inline: auto;
}

.wr-compare__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-2xl);
  padding: 28px;
}

/* La nôtre : bord vert. Le vert dit « c'est le bon choix » sans avoir à
   l'écrire — et il tranche avec le violet, qui est partout ailleurs. */
.wr-compare__card--featured {
  border-color: var(--wr-success);
  box-shadow: 0 0 0 1px var(--wr-success), var(--wr-shadow);
}

.wr-compare__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wr-line);
}

.wr-compare__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--wr-line);
}
.wr-compare__row:last-child { border-bottom: 0; }

.wr-compare__label { color: var(--wr-muted); }

.wr-compare__value {
  font-weight: 600;
  color: var(--wr-ink);
  display: flex;
  align-items: center;
  gap: 5px;
}
.wr-compare__value svg { width: 15px; height: 15px; }
.wr-compare__value--yes svg { color: var(--wr-success); }
.wr-compare__value--no  { color: var(--wr-muted-2); }
.wr-compare__value--no svg { color: var(--wr-muted-2); }

@media (max-width: 768px) {
  .wr-compare { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   PROMO CARD  (fin d'annuaire)
   ══════════════════════════════════════════════════════════════════ */

.wr-promo {
  background: linear-gradient(135deg, var(--wr-violet), #9D7BCC);
  border-radius: var(--wr-r-2xl);
  padding: 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: 24px;
}

.wr-promo__inner { position: relative; z-index: 1; }

.wr-promo__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--wr-r-md);
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.wr-promo__icon svg { width: 22px; height: 22px; }

.wr-promo__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.wr-promo__list {
  display: grid;
  gap: 9px;
  margin-bottom: 24px;
}

.wr-promo__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .9);
}
.wr-promo__item svg { width: 15px; height: 15px; flex-shrink: 0; }

.wr-promo::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
  top: -100px;
  right: -80px;
  filter: blur(30px);
}

.wr-promo .wr-btn--secondary {
  background: #fff;
  border-color: #fff;
  color: var(--wr-violet);
}
.wr-promo .wr-btn--secondary:hover {
  background: rgba(255, 255, 255, .9);
  color: var(--wr-violet-dark);
}

@media (max-width: 540px) {
  .wr-promo { padding: 24px; }
  .wr-promo__title { font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════
   FICHE OFFRE / ENTREPRISE
   ══════════════════════════════════════════════════════════════════ */

.wr-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 991px) {
  .wr-detail { grid-template-columns: 1fr; gap: 32px; }
  .wr-detail__aside { order: -1; }
}

/* ── En-tête de fiche ── */
.wr-detail__head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.wr-detail__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--wr-ink);
  line-height: 1.2;
  margin-bottom: 10px;
}

.wr-detail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--wr-muted);
}
.wr-detail__meta span { display: inline-flex; align-items: center; gap: 5px; }
.wr-detail__meta svg { width: 14px; height: 14px; }
.wr-detail__meta strong { color: var(--wr-ink); font-weight: 600; }

@media (max-width: 540px) {
  .wr-detail__title { font-size: 22px; }
}

/* ── Aside ── */
.wr-aside {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  padding: 24px;
  box-shadow: var(--wr-shadow);
  position: sticky;
  top: 88px;
}

.wr-aside__salary {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--wr-line);
}

.wr-aside__amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  line-height: 1.1;
  margin-top: 6px;
}

.wr-aside__rows { display: grid; gap: 12px; margin-bottom: 20px; }

.wr-aside__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.wr-aside__row dt { color: var(--wr-muted); }
.wr-aside__row dd { color: var(--wr-ink); font-weight: 600; text-align: right; }

@media (max-width: 991px) {
  .wr-aside { position: static; }
}

/* ══════════════════════════════════════════════════════════════════
   TEASING — le mur de connexion

   Le contenu tronqué s'estompe, puis laisse place au CTA. On ne coupe
   pas net : on montre qu'il y a une suite.

   ⚠️  Le masque est PUREMENT VISUEL. Le contenu caché n'est PAS dans le
   HTML — le service ne l'a pas envoyé. Un curieux qui inspecte le code
   ne trouvera rien.
   ══════════════════════════════════════════════════════════════════ */

.wr-prose.is-fading {
  position: relative;
  max-height: 320px;
  overflow: hidden;
}

.wr-prose.is-fading::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--wr-bg));
  pointer-events: none;
}

.wr-teaser {
  margin-top: -60px;
  padding-top: 60px;
  position: relative;
}

.wr-teaser__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-violet-2);
  border-radius: var(--wr-r-2xl);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--wr-shadow-hover);
  position: relative;
  overflow: hidden;
}

.wr-teaser__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
}
.wr-teaser__icon svg { width: 24px; height: 24px; }

.wr-teaser__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  margin-bottom: 10px;
}

.wr-teaser__text {
  font-size: 14px;
  color: var(--wr-muted);
  max-width: 44ch;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* Ce qu'on débloque. « Connectez-vous » tout seul ne convainc personne :
   il faut dire ce qu'on y gagne. */
.wr-teaser__perks {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-line);
}

@media (max-width: 540px) {
  .wr-teaser__card { padding: 28px 20px; }
  .wr-teaser__title { font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   Centré, avec deux blobs violets flous dans les coins. Pas d'image
   photographique : elle daterait la page et pèserait lourd.
   ══════════════════════════════════════════════════════════════════ */

.wr-hero {
  position: relative;
  padding: 24px 0 0;
  overflow: hidden;
}

.wr-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 48px;
}

.wr-hero .wr-h1 {
  margin: 20px auto 18px;
  max-width: 860px;
}

.wr-hero .wr-lede {
  margin: 0 auto 28px;
  text-align: center;
}

/* La marque, en violet, dans le lede */
.wr-hero .wr-lede strong {
  color: var(--wr-violet);
  font-weight: 600;
}

/* ── Les blobs ──
   Très pâles, très flous. On ne doit pas les voir consciemment — juste
   sentir que le fond n'est pas plat. */
.wr-hero .wr-blob--1 {
  width: 560px;
  height: 560px;
  top: -180px;
  right: -140px;
}

.wr-hero .wr-blob--2 {
  width: 480px;
  height: 480px;
  bottom: -120px;
  left: -160px;
}

/* ══════════════════════════════════════════════════════════════════
   PILLS « POPULAIRE »
   Cliquer remplit la recherche. C'est un raccourci, pas un filtre :
   l'utilisateur peut toujours taper autre chose.
   ══════════════════════════════════════════════════════════════════ */

.wr-populars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.wr-populars__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted-2);
  margin-right: 4px;
}

@media (max-width: 540px) {
  .wr-populars__label { width: 100%; text-align: center; margin-bottom: 4px; }
}

/* ══════════════════════════════════════════════════════════════════
   BOUTONS STORES
   ══════════════════════════════════════════════════════════════════ */

.wr-stores {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.wr-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--wr-r-md);
  background: var(--wr-violet);
  color: #fff;
  border: 1px solid var(--wr-violet);
  box-shadow: 0 4px 14px rgba(138, 99, 193, .32);
  transition: all var(--wr-t);
}
.wr-store:hover {
  background: var(--wr-violet-dark);
  border-color: var(--wr-violet-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(138, 99, 193, .4);
}

.wr-store svg { width: 20px; height: 20px; flex-shrink: 0; }

.wr-store__text { text-align: left; line-height: 1.2; }
.wr-store__small { display: block; font-size: 9.5px; opacity: .85; font-weight: 500; }
.wr-store__big { display: block; font-size: 13px; font-weight: 700; }

@media (max-width: 540px) {
  .wr-stores { flex-direction: column; }
  .wr-store { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   LISTE D'OFFRES DU HERO
   Le conteneur blanc, sous la recherche. C'est la promesse de la page :
   « il y a du contenu, tout de suite ».
   ══════════════════════════════════════════════════════════════════ */

.wr-hero-list {
  margin-top: 32px;
  text-align: left;
}

.wr-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--wr-line);
}

.wr-list__count {
  font-size: 13px;
  color: var(--wr-muted);
}
.wr-list__count strong {
  color: var(--wr-ink);
  font-weight: 700;
}

/* La byline sous la liste : trois arguments, séparés par des points. */
.wr-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--wr-muted);
  flex-wrap: wrap;
}
.wr-byline strong { color: var(--wr-ink); font-weight: 700; }
.wr-byline__sep { color: var(--wr-line-2); }

/* ══════════════════════════════════════════════════════════════════
   TROIS PARCOURS
   ══════════════════════════════════════════════════════════════════ */

.wr-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wr-path {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-2xl);
  box-shadow: var(--wr-shadow);
  transition: all var(--wr-t);
}
.wr-path:hover {
  transform: translateY(-4px);
  box-shadow: var(--wr-shadow-hover);
  border-color: var(--wr-violet-2);
}

.wr-path__illu {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.wr-path__illu svg { width: 28px; height: 28px; }

/* Chaque parcours a sa teinte. Trois cards violettes se ressembleraient
   trop pour qu'on distingue les trois chemins. */
.wr-path:nth-child(1) .wr-path__illu { background: var(--wr-acc-violet); color: var(--wr-acc-violet-fg); }
.wr-path:nth-child(2) .wr-path__illu { background: var(--wr-acc-blue);   color: var(--wr-acc-blue-fg); }
.wr-path:nth-child(3) .wr-path__illu { background: var(--wr-acc-green);  color: var(--wr-acc-green-fg); }

.wr-path__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted-2);
  margin-bottom: 8px;
}

.wr-path__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--wr-ink);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.wr-path__desc {
  font-size: 14px;
  color: var(--wr-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
}

@media (max-width: 991px) {
  .wr-paths { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   COMMENT ÇA MARCHE — la card crème

   La SEULE rupture chromatique autorisée. Toujours arrondie, toujours
   posée sur le fond — jamais en pleine largeur, sinon elle écrase.
   ══════════════════════════════════════════════════════════════════ */

.wr-how {
  padding: 48px 40px;
  position: relative;
}

.wr-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

/* Les filets verticaux entre les étapes. En `::before` sur les 2e et 3e :
   pas de séparateur avant la première ni après la dernière. */
.wr-how__step { text-align: center; position: relative; }

.wr-how__step + .wr-how__step::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(30, 27, 46, .1);
}

.wr-how__illu {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  display: grid;
  place-items: center;
  color: var(--wr-violet-dark);
}
.wr-how__illu svg { width: 30px; height: 30px; }

.wr-how__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 8px;
}

.wr-how__desc {
  font-size: 13.5px;
  color: var(--wr-ink-2);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .wr-how { padding: 36px 24px; }
  .wr-how__steps { grid-template-columns: 1fr; gap: 32px; }
  .wr-how__step + .wr-how__step::before {
    left: 20%;
    right: 20%;
    top: -16px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FEATURES 01–04
   Texte et illustration alternés. Les numéros sont gros et clairs : ils
   donnent le rythme sans qu'on ait à les lire.
   ══════════════════════════════════════════════════════════════════ */

.wr-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 48px 0;
}

/* Une feature sur deux inverse l'ordre. Sans ça, la page défile en
   colonne et devient monotone. */
.wr-feat:nth-child(even) .wr-feat__text { order: 2; }

.wr-feat__num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-violet-2);
  margin-bottom: 12px;
}

.wr-feat__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  line-height: 1.2;
  margin-bottom: 14px;
}

.wr-feat__desc {
  font-size: 15px;
  color: var(--wr-ink-2);
  line-height: 1.65;
  margin-bottom: 20px;
}

.wr-feat__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wr-feat__illu {
  border-radius: var(--wr-r-2xl);
  background: var(--wr-violet-softer);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: var(--wr-violet);
  position: relative;
  overflow: hidden;
}
.wr-feat__illu svg { width: 64px; height: 64px; opacity: .5; }

@media (max-width: 991px) {
  .wr-feat {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }
  .wr-feat:nth-child(even) .wr-feat__text { order: 0; }
  .wr-feat__title { font-size: 24px; }
  .wr-feat__illu { aspect-ratio: 16 / 10; }
}

/* ══════════════════════════════════════════════════════════════════
   CARD D'INSCRIPTION
   ══════════════════════════════════════════════════════════════════ */

.wr-signup {
  border-radius: var(--wr-r-5xl);
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  box-shadow: var(--wr-shadow);
  padding: 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.wr-signup__form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 24px auto 0;
}
.wr-signup__form .wr-input { flex: 1; }

@media (max-width: 540px) {
  .wr-signup { padding: 32px 20px; }
  .wr-signup__form { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════
   CTA FINAL
   La card dégradé violet, en bas de page. Deux sous-cards blanches :
   un parcours candidat, un parcours recruteur.
   ══════════════════════════════════════════════════════════════════ */

.wr-final {
  padding: 56px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Un blob blanc, très diffus, pour que le dégradé ne soit pas plat. */
.wr-final::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
  top: -150px;
  right: -100px;
  pointer-events: none;
}

.wr-final__inner { position: relative; z-index: 1; }

.wr-final__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
  max-width: 720px;
  margin-inline: auto;
}

.wr-final__card {
  background: var(--wr-card);
  border-radius: var(--wr-r-2xl);
  padding: 28px 24px;
  text-align: left;
  transition: transform var(--wr-t);
}
.wr-final__card:hover { transform: translateY(-3px); }

.wr-final__card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--wr-r-md);
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.wr-final__card-icon svg { width: 20px; height: 20px; }

.wr-final__card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 6px;
}

.wr-final__card-desc {
  font-size: 13.5px;
  color: var(--wr-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .wr-final { padding: 40px 20px; }
  .wr-final__cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   ANNUAIRES
   Conteneur étroit (880px) : une liste de 1200px force l'œil à balayer
   horizontalement pour rien.
   ══════════════════════════════════════════════════════════════════ */

.wr-filters {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-lg);
  padding: 16px;
  margin-bottom: 24px;
}

.wr-filters__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.wr-filters__search { flex: 1; min-width: 240px; }

/* Les chips de filtre. Cliquer bascule — c'est un lien, donc ça marche
   sans JavaScript et l'état est dans l'URL. */
.wr-filters__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wr-line);
}

.wr-filters__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted-2);
  align-self: center;
  margin-right: 4px;
}

@media (max-width: 640px) {
  .wr-filters__row { flex-direction: column; align-items: stretch; }
  .wr-filters__row .wr-btn { width: 100%; }
}

/* ── Le compteur de résultats ── */
.wr-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wr-results-count {
  font-size: 13.5px;
  color: var(--wr-muted);
}
.wr-results-count strong { color: var(--wr-ink); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   FICHE OFFRE / ENTREPRISE
   ══════════════════════════════════════════════════════════════════ */

.wr-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 991px) {
  .wr-detail { grid-template-columns: 1fr; gap: 28px; }
}

/* ── L'en-tête de la fiche ── */
.wr-detail__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.wr-detail__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  line-height: 1.2;
  margin-bottom: 10px;
}

.wr-detail__company {
  font-size: 15px;
  font-weight: 600;
  color: var(--wr-ink-2);
}

.wr-detail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--wr-muted);
  flex-wrap: wrap;
}
.wr-detail__meta span { display: inline-flex; align-items: center; gap: 5px; }
.wr-detail__meta svg { width: 13px; height: 13px; }

.wr-detail__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 540px) {
  .wr-detail__title { font-size: 22px; }
}

/* ── Les sections de l'annonce ── */
.wr-detail__section { margin-bottom: 36px; }

.wr-detail__section h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

/* ── L'aside ── */
.wr-aside {
  position: sticky;
  top: 88px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  padding: 24px;
  box-shadow: var(--wr-shadow);
}

@media (max-width: 991px) {
  .wr-aside { position: static; }
}

.wr-aside__salary {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--wr-line);
}

.wr-aside__amount {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  margin-top: 4px;
}

.wr-aside__rows { display: grid; gap: 12px; }

.wr-aside__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.wr-aside__row dt { color: var(--wr-muted); }
.wr-aside__row dd { color: var(--wr-ink); font-weight: 600; text-align: right; }

/* ══════════════════════════════════════════════════════════════════
   TEASING — le mur de connexion

   Le contenu tronqué s'estompe puis laisse place au CTA. On ne coupe
   pas net : on montre qu'il y a une suite.

   ⚠️  Le masque est PUREMENT VISUEL. Le contenu caché n'est PAS dans le
   HTML — le serveur ne l'a pas envoyé. Un curieux qui inspecte le code
   ne trouvera rien.
   ══════════════════════════════════════════════════════════════════ */

.wr-prose.is-fading {
  position: relative;
  max-height: 300px;
  overflow: hidden;
}
.wr-prose.is-fading::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--wr-bg));
  pointer-events: none;
}

.wr-teaser {
  margin-top: -60px;
  padding-top: 60px;
  position: relative;
}

.wr-teaser__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-violet-2);
  border-radius: var(--wr-r-2xl);
  padding: 36px 32px;
  text-align: center;
  box-shadow: var(--wr-shadow-hover);
}

.wr-teaser__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: var(--wr-r-lg);
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
}
.wr-teaser__icon svg { width: 22px; height: 22px; }

.wr-teaser__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 8px;
}

.wr-teaser__text {
  font-size: 14px;
  color: var(--wr-muted);
  max-width: 42ch;
  margin: 0 auto 24px;
  line-height: 1.6;
}

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

/* Ce qu'on débloque, nommément. « Connectez-vous » tout seul ne
   convainc personne. */
.wr-teaser__perks {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wr-line);
}

.wr-teaser__perk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--wr-ink-2);
}
.wr-teaser__perk svg {
  width: 14px;
  height: 14px;
  color: var(--wr-success);
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .wr-teaser__card { padding: 28px 20px; }
  .wr-teaser__actions { flex-direction: column; }
  .wr-teaser__actions .wr-btn { width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════
   REPRISE — composants manquants
   ══════════════════════════════════════════════════════════════════════

   Le design system wr-* couvrait la home, l'annuaire, les fiches. Il ne
   couvrait PAS le blog, l'article, le contact, l'authentification, les
   pages CMS ni les pages d'erreur : ces vues étaient restées sur
   l'ancienne feuille (`pages.css`, `app.css`), que le layout ne charge
   plus. Résultat : du HTML nu, sans une seule règle.

   On complète ici, avec les mêmes tokens. Aucune couleur en dur hors des
   pastels documentés.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Blog : grille d'articles ─────────────────────────────────────── */

/* ⚠️  TROIS COLONNES FIXES CASSAIENT LA GRILLE EN PLEINE LARGEUR.

   `repeat(3, 1fr)` répartit l'espace quoi qu'il arrive : sur un écran de
   1900 px, chaque card faisait 600 px de large — une image étirée, un titre
   perdu au milieu d'une ligne vide, et le sentiment que l'affichage est
   cassé. C'était vrai : la grille ne s'adaptait pas, elle divisait.

   `auto-fill` + `minmax` raisonne dans l'autre sens : une card fait AU MOINS
   320 px, et le navigateur en met autant que la largeur le permet — trois
   sur un portable, cinq ou six sur un grand écran. Les deux règles
   responsive qui suivaient (2 colonnes, puis 1) deviennent inutiles :
   la même formule couvre toutes les tailles. */
.wr-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.wr-post {
  display: flex;
  flex-direction: column;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--wr-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wr-post:hover {
  transform: translateY(-4px);
  border-color: var(--wr-violet-2);
  box-shadow: var(--wr-shadow-hover);
}

.wr-post__cover {
  aspect-ratio: 16 / 9;
  background: var(--wr-bg-2);
  overflow: hidden;
}

.wr-post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.wr-post:hover .wr-post__cover img { transform: scale(1.04); }

/* Sans visuel, la card ne doit pas paraître amputée : on remplit le haut
   d'un aplat violet très pâle plutôt que de laisser un trou blanc. */
.wr-post__cover--empty {
  aspect-ratio: 16 / 6;
  background:
    radial-gradient(120% 120% at 20% 0%, var(--wr-violet-soft), transparent 70%),
    var(--wr-violet-softer);
}

.wr-post__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.wr-post__title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--wr-ink);
  margin: 0;
  transition: color .18s ease;
}

.wr-post:hover .wr-post__title { color: var(--wr-violet-dark); }

.wr-post__excerpt {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wr-muted);
  margin: 0;
}

.wr-post__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--wr-muted-2);
}

/* ── Article ──────────────────────────────────────────────────────── */

/* La couverture est définie PLUS BAS, en un seul endroit (recherchez
   `.wr-article__cover-wrap`). Deux blocs pour la même classe dans le même
   fichier, c'est la garantie qu'on modifiera un jour celui qui ne s'applique
   pas — et qu'on cherchera longtemps pourquoi rien ne bouge. */

.wr-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.wr-avatar img { width: 100%; height: 100%; object-fit: cover; }

.wr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--wr-line-2);
}

.wr-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-size: 12.5px;
  font-weight: 600;
}

/* ── Contact ──────────────────────────────────────────────────────── */

.wr-contact {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

.wr-contact__form {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--wr-shadow);
}

.wr-contact__aside {
  background: var(--wr-cream);
  border-radius: 20px;
  padding: 28px;
  position: sticky;
  top: 92px;
}

.wr-contact__aside-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wr-ink);
  margin: 0 0 20px;
}

.wr-contact__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid rgba(30, 27, 46, .07);
}

.wr-contact__item:first-of-type { border-top: 0; padding-top: 0; }

.wr-contact__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .75);
  color: var(--wr-violet-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Sans cette contrainte, un SVG sans width/height s'étale sur toute la
   largeur disponible. C'est exactement ce qui donnait un avion en papier
   de 2000 px de haut sur la page contact. */
.wr-contact__icon svg { width: 18px; height: 18px; }

.wr-contact__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted);
  margin-bottom: 3px;
}

.wr-contact__value {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wr-ink);
  text-decoration: none;
  word-break: break-word;
}

a.wr-contact__value:hover { color: var(--wr-violet-dark); }

/* ── Authentification ─────────────────────────────────────────────── */

.wr-auth {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 72px;
}

.wr-auth__card {
  width: 100%;
  max-width: 460px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--wr-shadow);
  position: relative;
  z-index: 1;
}

.wr-auth__card--wide { max-width: 760px; padding: 44px 48px; }

.wr-auth__head { text-align: center; margin-bottom: 28px; }

.wr-auth__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wr-ink);
  margin: 0 0 8px;
}

.wr-auth__sub {
  font-size: 14.5px;
  color: var(--wr-muted);
  margin: 0;
}

.wr-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.wr-auth__foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wr-line);
  text-align: center;
  font-size: 14px;
  color: var(--wr-muted);
}

/* Choix du type de compte à l'inscription : deux grandes cibles, pas deux
   radios de 13 px. C'est la première décision du parcours. */
.wr-auth__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.wr-auth__choice {
  display: block;
  cursor: pointer;
  padding: 18px 16px;
  border: 1px solid var(--wr-line);
  border-radius: 14px;
  background: var(--wr-card);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.wr-auth__choice:hover { border-color: var(--wr-violet-2); transform: translateY(-2px); }

.wr-auth__choice input { position: absolute; opacity: 0; pointer-events: none; }

.wr-auth__choice:has(input:checked) {
  border-color: var(--wr-violet);
  background: var(--wr-violet-softer);
  box-shadow: 0 0 0 1px var(--wr-violet);
}

.wr-auth__choice-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 4px;
}

.wr-auth__choice-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wr-muted);
}

/* ── Pages d'erreur ───────────────────────────────────────────────── */

.wr-oops {
  min-height: calc(100vh - 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 20px;
}

.wr-oops__inner { max-width: 480px; position: relative; z-index: 1; }

.wr-oops__code {
  font-size: 78px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--wr-violet), var(--wr-violet-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
}

.wr-oops__icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.wr-oops__icon svg { width: 26px; height: 26px; }

.wr-oops__title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wr-ink);
  margin: 0 0 10px;
}

.wr-oops__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wr-muted);
  margin: 0 0 28px;
}

/* ── Blocs CMS ────────────────────────────────────────────────────── */

.wr-cms-hero {
  text-align: center;
  padding: 64px 0 48px;
  position: relative;
}

.wr-cms-hero__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--wr-ink);
  margin: 0 0 16px;
}

.wr-cms-hero__sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--wr-muted);
  max-width: 640px;
  margin: 0 auto 28px;
}

.wr-cms-ti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.wr-cms-ti--reverse .wr-cms-ti__media { order: -1; }

.wr-cms-ti__media img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--wr-line);
  box-shadow: var(--wr-shadow);
  display: block;
}

.wr-cms-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.wr-cms-stat {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
}

.wr-cms-stat__value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wr-violet);
  line-height: 1;
  margin-bottom: 8px;
}

.wr-cms-stat__label {
  font-size: 13.5px;
  color: var(--wr-muted);
}

.wr-cms-banner {
  background: var(--wr-cream);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wr-cms-banner__text { flex: 1; min-width: 240px; }

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 991px) {
  /* .wr-posts : plus de surcharge — `auto-fill` adapte seul (voir plus haut). */
  .wr-contact { grid-template-columns: 1fr; gap: 28px; }
  .wr-contact__aside { position: static; }
  .wr-cms-ti { grid-template-columns: 1fr; gap: 28px; }
  .wr-cms-ti--reverse .wr-cms-ti__media { order: 0; }
}

@media (max-width: 640px) {
  /* .wr-posts : idem, `minmax(320px, 1fr)` retombe à une colonne tout seul. */
  .wr-contact__form { padding: 24px 20px; }
  .wr-auth__card { padding: 28px 22px; }
  .wr-auth__choices { grid-template-columns: 1fr; }
  .wr-cms-hero__title { font-size: 30px; }
  .wr-oops__code { font-size: 58px; }
}

/* Champ « nom de l'entreprise » : révélé quand le type de compte est
   « entreprise ». En CSS pur — l'ancien toggle vivait dans `app.js`, qui
   n'est plus chargé : le champ était devenu invisible ET obligatoire.

   Visible par défaut : si le navigateur ignore `:has()`, mieux vaut un
   champ de trop qu'un champ obligatoire qu'on ne peut pas remplir. */
.wr-auth__enterprise { display: block; }

@supports selector(:has(*)) {
  .wr-auth__enterprise { display: none; }

  form:has(input[name="type"][value="enterprise"]:checked) .wr-auth__enterprise {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MODALE
   ══════════════════════════════════════════════════════════════════════
   Mêmes conventions que le drawer : `.is-open` porté par la racine, fond
   `rgba(30,27,46,.4)` flouté, `z-index` au-dessus du header.
   ══════════════════════════════════════════════════════════════════════ */

.wr-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  /* `visibility` en plus de l'opacité : sans elle, la modale invisible
     resterait cliquable et volerait le focus au clavier. */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.wr-modal.is-open { opacity: 1; visibility: visible; }

.wr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 27, 46, .4);
  backdrop-filter: blur(2px);
}

.wr-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 24px;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 64px rgba(30, 27, 46, .18);

  /* La modale monte de 12px en s'ouvrant. Elle ne « pop » pas : elle
     arrive. */
  transform: translateY(12px) scale(.98);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}

.wr-modal.is-open .wr-modal__panel { transform: none; }

.wr-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wr-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease;
}

.wr-modal__close:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
}

.wr-modal__head {
  text-align: center;
  margin-bottom: 24px;
}

.wr-modal__body { min-height: 0; }

/* Le bandeau d'erreur renvoyé par le serveur (compte verrouillé, trop de
   tentatives) — distinct des erreurs de champ. */
.wr-modal__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Le bouton pendant l'envoi : on ne le laisse pas inerte. */
.wr-btn[data-busy] { pointer-events: none; opacity: .75; }

@media (max-width: 540px) {
  .wr-modal { padding: 0; align-items: flex-end; }

  /* Sur mobile, la modale colle en bas et monte : c'est le geste natif,
     et le pouce atteint le formulaire sans traverser l'écran. */
  .wr-modal__panel {
    max-width: none;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wr-modal,
  .wr-modal__panel { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOME BUSINESS — hero sur deux colonnes
   ══════════════════════════════════════════════════════════════════════
   La promesse à gauche, l'inscription à droite. En B2B, le formulaire doit
   être visible sans scroller : un recruteur qui arrive avec une intention
   ne doit pas avoir à la chercher.
   ══════════════════════════════════════════════════════════════════════ */

.wr-hero--split { text-align: left; }

.wr-hero__split {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

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

/* Le hero centré force le centrage de ses enfants. Sur deux colonnes, on
   reprend la main : un titre de 48px centré dans une demi-largeur, ça ne
   se lit pas. */
.wr-hero--split .wr-h1,
.wr-hero--split .wr-lede,
.wr-hero--split .wr-eyebrow { margin-inline: 0; text-align: left; }

.wr-hero--split .wr-lede { max-width: 480px; }

/* Le badge `business` à côté du logo. Sans lui, un recruteur croit s'être
   perdu sur le site candidat. */
.wr-logo-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  margin-left: 9px;
  border-radius: 100px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* Le lien « Recruter » du header candidat : un lien de nav, mais qui doit
   se voir. Violet, pas gris. */
.wr-nav__link--cta {
  color: var(--wr-violet-dark);
  font-weight: 700;
}

.wr-nav__link--cta:hover { color: var(--wr-violet); }

@media (max-width: 991px) {
  .wr-hero__split { grid-template-columns: 1fr; gap: 36px; }

  /* Sous 991px, la card passe SOUS la promesse. On ne l'écrase pas : on la
     laisse respirer, elle reste le premier élément après le pli. */
  .wr-hero--split .wr-lede { max-width: none; }
}

@media (max-width: 768px) {
  /* Le lien « Recruter » disparaît du header : la place manque, et le
     drawer le porte déjà. */
  .wr-nav__link--cta { display: none; }
}

@media (max-width: 540px) {
  .wr-logo-badge { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER ET FOOTER — PLEINE LARGEUR
   ══════════════════════════════════════════════════════════════════════

   Le contenu d'une page de lecture reste contenu : une ligne de texte de
   2000 px ne se lit pas. Mais une BARRE n'est pas du texte. Contraindre le
   header à 1200 px laisse deux vides latéraux qui ne servent à rien, et
   décolle le logo du bord de l'écran.

   Le fond était déjà pleine largeur ; c'est le CONTENU qui ne l'était pas.
   ══════════════════════════════════════════════════════════════════════ */

.wr-header .wr-container,
.wr-footer .wr-container {
  max-width: none;
  padding-inline: 40px;
}

@media (max-width: 768px) {
  .wr-header .wr-container,
  .wr-footer .wr-container { padding-inline: 20px; }
}

/* Le message adressé à un candidat connecté sur la page business. Un bouton
   qui disparaît laisse croire à un bug ; un message dit ce qui se passe. */
.wr-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}

.wr-notice svg { flex: none; margin-top: 2px; }
.wr-notice a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Variante « à compléter » : fond ambré, et passage en colonne.

   Le `flex` horizontal de base sert aux messages d'une ligne avec icône.
   Un bandeau à trois étages — titre, explication, bouton — a besoin d'un
   empilement vertical, sinon les trois se serrent sur une même ligne. */
.wr-notice--warn {
  flex-direction: column;
  align-items: stretch;
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}

/* Le bouton garde ses propres couleurs : `color: inherit` sur les liens
   du bloc le rendrait ambre sur fond violet. */
.wr-notice--warn .wr-btn {
  align-self: flex-start;
  color: #fff;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════
   L'OFFRE EST CLOSE
   ══════════════════════════════════════════════════════════════════════ */

.wr-expired {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--wr-container);
  margin: 20px auto 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.wr-expired__icon { flex: none; }
.wr-expired__body { flex: 1; min-width: 0; }
.wr-expired__body strong { display: block; font-size: 15px; margin-bottom: 2px; }
.wr-expired__body p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .9; }

/* ══════════════════════════════════════════════════════════════════════
   LE % DE CORRESPONDANCE

   La couleur suit le score. Mais elle ne JUGE pas : même en rouge, le message
   dit qu'une compétence manquante n'est pas un refus. Un algorithme qui compare
   des chaînes ne sait pas qu'un bon développeur apprend vite.
   ══════════════════════════════════════════════════════════════════════ */

.wr-match {
  border: 1px solid var(--wr-line);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 24px;
  background: var(--wr-card);
}

.wr-match__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }

.wr-match__score {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  flex: none;
}

.wr-match__score small { font-size: 16px; font-weight: 700; opacity: .6; }

.wr-match__label strong { display: block; font-size: 15px; color: var(--wr-ink); }
.wr-match__label p { margin: 2px 0 0; font-size: 13px; color: var(--wr-muted); line-height: 1.45; }

.wr-match__bar {
  height: 7px;
  border-radius: 100px;
  background: var(--wr-bg-2);
  overflow: hidden;
  margin-bottom: 18px;
}

.wr-match__bar span {
  display: block;
  height: 100%;
  border-radius: 100px;
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

/* Quatre paliers. Le vert n'est pas une promesse d'embauche, le rouge n'est pas
   un refus — ce sont des repères. */
.wr-match--excellent { border-color: #A7F3D0; background: #ECFDF5; }
.wr-match--excellent .wr-match__score { color: #047857; }
.wr-match--excellent .wr-match__bar span { background: #10B981; }

.wr-match--good { border-color: #BFDBFE; background: #EFF6FF; }
.wr-match--good .wr-match__score { color: #1E40AF; }
.wr-match--good .wr-match__bar span { background: #3B82F6; }

.wr-match--partial { border-color: #FDE68A; background: #FFFBEB; }
.wr-match--partial .wr-match__score { color: #92400E; }
.wr-match--partial .wr-match__bar span { background: #F59E0B; }

.wr-match--low { border-color: var(--wr-line); }
.wr-match--low .wr-match__score { color: var(--wr-muted); }
.wr-match--low .wr-match__bar span { background: var(--wr-muted-2); }

.wr-match__block { margin-bottom: 14px; }

.wr-match__cap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.wr-match__cap--ok { color: #047857; }
.wr-match__cap--miss { color: var(--wr-muted); }

.wr-match__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.wr-match__tag {
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
}

.wr-match__tag--ok { background: #D1FAE5; color: #065F46; }
.wr-match__tag--miss { background: var(--wr-bg-2); color: var(--wr-muted); border: 1px dashed var(--wr-line-2); }

.wr-match__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--wr-muted);
  line-height: 1.5;
  font-style: italic;
}

.wr-match__details { margin-top: 14px; border-top: 1px solid var(--wr-line); padding-top: 12px; }

.wr-match__details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wr-muted);
}

.wr-match__details summary:hover { color: var(--wr-violet); }

.wr-match__details ul { list-style: none; padding: 12px 0 0; margin: 0; }

.wr-match__details li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--wr-ink-2);
  border-bottom: 1px solid var(--wr-line);
}

.wr-match__pts { font-weight: 700; color: var(--wr-muted); font-variant-numeric: tabular-nums; }

/* Pas de CV : ce n'est pas une erreur, c'est l'occasion. Il regarde une offre —
   il est motivé. */
.wr-match--locked {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wr-violet-softer);
  border-color: var(--wr-violet-2);
}

.wr-match__lock { flex: none; color: var(--wr-violet); }
.wr-match--locked > div { flex: 1; min-width: 0; }
/* ⚠️  J'AVAIS MIS LES 20 px AU MAUVAIS ENDROIT.

   « Un margin bottom sous *Cette offre est-elle pour vous ?* » désignait le
   BLOC — nommé par son titre — et non la ligne de titre. Je l'ai posé entre
   la question et sa phrase : le bloc s'est écartelé de l'intérieur, et
   « Le poste » est resté aussi près qu'avant.

   Six pixels suffisent ici : assez pour que la question se lise comme un
   titre, pas assez pour couper le bloc en deux. */
.wr-match--locked strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14.5px;
  color: var(--wr-ink);
}

/* ⚠️  L'ESPACE DEMANDÉ EST SOUS LE BLOC, PAS DEDANS.

   `.wr-match` pose 24 px, mais ce bloc-ci porte un fond coloré : sa
   bordure inférieure est une ligne visible, et 24 px la laissent près du
   titre suivant. Un bloc plein a besoin de plus d'air qu'un bloc
   transparent pour paraître détaché.

   On monte à 36 px — la question et « Le poste » cessent de se toucher. */
/* ⚠️  IL FAUT DE L'AIR DES DEUX CÔTÉS.

   Je n'avais posé qu'une marge basse. En haut, le bloc touchait le
   sous-titre ; en retirant la ligne de provenance et le lieu, il s'est
   retrouvé collé au titre lui-même.

   Un bloc à fond coloré a besoin d'être détaché des deux côtés pour se
   lire comme un encart, et non comme la suite du texte. */
.wr-match--locked {
  margin-top: 28px;
  margin-bottom: 36px;
}

/* Un peu d'air sous le texte : le bouton est à droite sur grand écran,
   mais passe DESSOUS en dessous de 640 px — sans marge, il touche la
   dernière ligne. */
.wr-match--locked p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wr-muted);
}

/* La dernière marge est inutile quand le bouton reste à droite : elle
   décentrerait le bloc verticalement. */
@media (min-width: 641px) {
  .wr-match--locked p { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .wr-expired, .wr-match--locked { flex-wrap: wrap; }
  .wr-match__head { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   LIEN MAGIQUE
   ══════════════════════════════════════════════════════════════════════ */

.wr-magic {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--wr-line);
}

.wr-magic summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wr-violet);
  list-style: none;
}

.wr-magic summary::-webkit-details-marker { display: none; }
.wr-magic summary:hover { color: var(--wr-violet-dark); }
.wr-magic__form { margin-top: 16px; }

/* Les pages du lien magique */
.wr-auth { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }

.wr-auth__card {
  width: 100%;
  text-align: center;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 20px;
  padding: 40px 32px;
}

.wr-auth__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.wr-auth__icon--success { background: #D1FAE5; color: #047857; }
.wr-auth__icon--warning { background: #FFFBEB; color: #92400E; }

.wr-auth__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.wr-auth__sub { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--wr-muted); }

.wr-auth__tips {
  background: var(--wr-bg-2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 22px;
  text-align: left;
}

.wr-auth__tips p { margin: 0 0 6px; font-size: 13px; color: var(--wr-muted); line-height: 1.5; }
.wr-auth__tips p:last-child { margin: 0; }

.wr-auth__note { margin: 16px 0 0; font-size: 12.5px; color: var(--wr-muted-2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   LA PAGE COURANTE, DANS LE HEADER

   ⚠️  IL N'Y AVAIT AUCUNE RÈGLE.

   La classe `.is-active` était posée par la vue — et ne faisait RIEN. On
   naviguait sans jamais savoir où l'on était.

   ⚠️  ET CE N'EST PAS UN SURVOL QUI RESTE.

   Le survol dit « tu peux cliquer ici ». L'actif dit « tu ES ici ». Deux
   informations différentes : elles ne peuvent pas avoir la même apparence,
   sinon on croit pouvoir cliquer sur la page qu'on lit déjà.

   Le survol s'assombrit. L'actif prend la couleur de la marque, gagne du gras,
   et pose un trait sous lui. On le voit du coin de l'œil.
   ══════════════════════════════════════════════════════════════════════ */

.wr-nav__link {
  position: relative;
}

.wr-nav__link.is-active {
  color: var(--wr-violet);
  font-weight: 600;
}

/* Le trait. En pseudo-élément : il n'occupe pas de place, donc le texte ne
   saute pas d'un pixel quand on change de page. */
.wr-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--wr-violet);
}

/* Le survol de la page COURANTE ne change rien : on y est déjà. */
.wr-nav__link.is-active:hover {
  color: var(--wr-violet-dark);
}

/* ══════════════════════════════════════════════════════════════════════
   « CRÉER UNE ANNONCE » dans le footer
   ══════════════════════════════════════════════════════════════════════ */

.wr-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--wr-violet);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s ease, transform .12s ease;
}

.wr-footer__cta:hover {
  background: var(--wr-violet-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════
   LA BANDE CTA de la page business
   ══════════════════════════════════════════════════════════════════════ */

.wr-cta-band {
  padding: 56px 0;
  background: linear-gradient(135deg, var(--wr-violet-softer), var(--wr-bg-2));
}

.wr-cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.wr-cta-band__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  background: #D1FAE5;
  color: #065F46;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
}

.wr-cta-band__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--wr-ink);
}

.wr-cta-band__title em { color: var(--wr-violet); font-style: normal; }

.wr-cta-band__desc {
  font-size: 15px;
  color: var(--wr-muted);
  margin: 0;
  max-width: 42ch;
}

@media (max-width: 640px) {
  .wr-cta-band__inner { flex-direction: column; align-items: flex-start; }
  .wr-cta-band__title { font-size: 23px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MODE SWIPE DES OFFRES (wr-jswipe)

   La pile d'offres sur la fiche : barre de navigation, deck de cartes qu'on
   glisse, actions (pass/like), mur d'inscription (anonyme). Progressif : la
   barre existe sans JS, mais le deck et les actions ne sont peuplés/révélés
   que par wr-job-swipe.js.
   ══════════════════════════════════════════════════════════════════════ */
.wr-jswipe {
  max-width: 720px;
  margin: 0 auto 22px;
  padding: 0 16px;
}

.wr-jswipe__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--wr-violet-softer, #F3EEFB);
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  border-radius: 999px;
  padding: 8px 10px 8px 16px;
  margin-bottom: 16px;
}
.wr-jswipe__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--wr-violet-dark, #5B3E8E);
}
.wr-jswipe__nav { display: flex; gap: 8px; }
.wr-jswipe__navbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  color: var(--wr-ink, #1E1B2E);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wr-jswipe__navbtn svg { width: 15px; height: 15px; }
.wr-jswipe__navbtn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.wr-jswipe__navbtn--dark { background: #111114; color: #fff; border-color: #111114; }
.wr-jswipe__navbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Le deck ─────────────────────────────────────────────────────────── */
.wr-jswipe__deck {
  position: relative;
  min-height: 220px;
  touch-action: pan-y;
}

.wr-jcard {
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 26px rgba(30, 27, 46, .08);
  cursor: grab;
  user-select: none;
  will-change: transform, opacity;
}
.wr-jcard.is-top { animation: jcardIn .22s ease; }
.wr-jcard:active { cursor: grabbing; }
.wr-jcard.is-liked { border-color: var(--wr-violet, #8A63C1); }

@keyframes jcardIn {
  from { transform: scale(.97) translateY(6px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.wr-jcard__top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.wr-jcard__logo {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--wr-r-md, 12px);
  background: var(--wr-violet-soft, #EDE6F8);
  color: var(--wr-violet-dark, #5B3E8E);
  display: grid; place-items: center;
  font-weight: 700; overflow: hidden;
}
.wr-jcard__logo img { width: 100%; height: 100%; object-fit: cover; }
.wr-jcard__title { font-size: 16px; font-weight: 700; color: var(--wr-ink, #1E1B2E); margin: 0 0 2px; line-height: 1.3; }
.wr-jcard__company { font-size: 13px; color: var(--wr-muted, #6B7280); }
.wr-jcard__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wr-jcard__excerpt { font-size: 13.5px; color: var(--wr-muted, #6B7280); line-height: 1.55; margin: 0 0 14px; }
.wr-jcard__foot { display: flex; justify-content: flex-end; }

/* ── Actions (pass / like) ───────────────────────────────────────────── */
.wr-jswipe__actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}
.wr-jswipe__act {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: transform .12s ease;
}
.wr-jswipe__act svg { width: 24px; height: 24px; }
.wr-jswipe__act:hover { transform: translateY(-2px) scale(1.04); }
.wr-jswipe__act--pass { color: #9CA3AF; }
.wr-jswipe__act--like { color: #fff; background: var(--wr-violet, #8A63C1); border-color: var(--wr-violet, #8A63C1); }

/* ── Mur d'inscription ───────────────────────────────────────────────── */
.wr-jswipe__wall {
  text-align: center;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow: 0 8px 26px rgba(30, 27, 46, .08);
}
.wr-jswipe__wall-lock {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--wr-violet-soft, #EDE6F8);
  color: var(--wr-violet, #8A63C1);
  display: grid; place-items: center;
}
.wr-jswipe__wall-lock svg { width: 24px; height: 24px; }
.wr-jswipe__wall-title { font-size: 18px; font-weight: 700; color: var(--wr-ink, #1E1B2E); margin: 0 0 6px; }
.wr-jswipe__wall-text { font-size: 14px; color: var(--wr-muted, #6B7280); margin: 0 auto 18px; max-width: 42ch; line-height: 1.55; }
.wr-jswipe__wall-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.wr-jswipe__end { text-align: center; padding: 40px 20px; color: var(--wr-muted, #6B7280); font-size: 15px; }

.wr-jswipe__hint {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 12px;
  font-size: 12px; color: var(--wr-muted-2, #9CA3AF);
}

/* ══════════════════════════════════════════════════════════════════════
   ANNUAIRE — MISE EN PAGE 2 COLONNES + SIDEBAR FACETTES (wr-facets)
   ══════════════════════════════════════════════════════════════════════ */
.wr-jobs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
.wr-jobs-main { min-width: 0; }

@media (max-width: 900px) {
  .wr-jobs-layout { grid-template-columns: 1fr; }
  .wr-facets { order: -1; }
}

/* Dans la sidebar du layout : la carte facette s'aligne sur les wr-side__card.
   `wr-facets` n'est qu'un conteneur ; chaque `wr-facet` EST une carte. */
.wr-facets { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }

.wr-facet {
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  padding: 16px;
}
.wr-facet__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wr-muted, #6B7280);
  margin-bottom: 12px;
}
.wr-facet__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 999px;
  padding: 7px 12px;
  margin-bottom: 10px;
  color: var(--wr-muted-2, #9CA3AF);
}
.wr-facet__search svg { width: 15px; height: 15px; flex: none; }
.wr-facet__input {
  border: 0; outline: 0; background: transparent;
  font-size: 13px; width: 100%; color: var(--wr-ink, #1E1B2E);
}
.wr-facet__list { display: flex; flex-direction: column; }
.wr-facet__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 10px;
  color: var(--wr-ink, #1E1B2E);
  font-size: 14px;
  transition: background .12s ease;
}
.wr-facet__item:hover { background: var(--wr-violet-softer, #F3EEFB); }
.wr-facet__item.is-active { background: var(--wr-violet-soft, #EDE6F8); color: var(--wr-violet-dark, #5B3E8E); font-weight: 600; }
.wr-facet__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-facet__count {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--wr-muted-2, #9CA3AF);
  background: var(--wr-line, #EEF1F7);
  border-radius: 999px;
  padding: 1px 8px;
}
.wr-facet__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}
.wr-facet__pgbtn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--wr-violet, #8A63C1);
}
.wr-facet__pgbtn svg { width: 15px; height: 15px; }
.wr-facet__pgbtn:disabled { opacity: .4; cursor: not-allowed; color: var(--wr-muted-2, #9CA3AF); }
.wr-facet__pgcount { font-size: 13px; font-weight: 600; color: var(--wr-violet-dark, #5B3E8E); }

/* ══════════════════════════════════════════════════════════════════════
   CTA DOUBLE (wr-cta-dual) — inséré dans la liste des articles

   Pleine largeur dans la grille .wr-posts (3 colonnes).
   ══════════════════════════════════════════════════════════════════════ */
.wr-cta-dual {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--wr-violet, #8A63C1), var(--wr-violet-dark, #5B3E8E));
  border-radius: 20px;
  padding: 32px;
  color: #fff;
}
.wr-cta-dual__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  margin: 0 0 22px;
  color: #fff;
}
.wr-cta-dual__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.wr-cta-dual__card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
}
.wr-cta-dual__role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wr-violet, #8A63C1);
  margin-bottom: 12px;
}
.wr-cta-dual__role svg { width: 16px; height: 16px; }
.wr-cta-dual__h { font-size: 18px; font-weight: 700; color: var(--wr-ink, #1E1B2E); margin: 0 0 6px; }
.wr-cta-dual__p { font-size: 14px; color: var(--wr-muted, #6B7280); line-height: 1.55; margin: 0 0 16px; }

@media (max-width: 640px) {
  .wr-cta-dual { padding: 22px; }
  .wr-cta-dual__cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO DE RECHERCHE — offres & entreprises (wr-hero-search)
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️  `:empty` : LA SECTION DES PUCES PEUT NE RIEN CONTENIR.

   Quand le backoffice n'a défini ni pays, ni villes, ni catégories, la
   section est rendue vide — et sa marge de 26 px creusait un blanc
   inexpliqué entre le champ de recherche et la liste. */
.wr-hero-search { margin-bottom: 26px; }
.wr-hero-search:empty { margin-bottom: 0; }

.wr-hero-search__form { margin-bottom: 18px; }
.wr-hero-search__field {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  padding: 10px 12px 10px 16px;
  box-shadow: 0 6px 22px rgba(30, 27, 46, .06);
}
.wr-hero-search__field > svg { width: 20px; height: 20px; color: var(--wr-muted-2, #9CA3AF); flex: none; }
.wr-hero-search__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 16px; color: var(--wr-ink, #1E1B2E);
}
.wr-hero-search__btn { flex: none; }

.wr-hero-search__row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.wr-hero-search__label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--wr-muted, #6B7280);
}
.wr-hero-search__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.wr-chip-suggest {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--wr-violet-softer, #F3EEFB);
  color: var(--wr-violet-dark, #5B3E8E);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600;
  transition: background .12s ease, transform .12s ease;
}
.wr-chip-suggest:hover { background: var(--wr-violet-2, #E4D9F5); transform: translateY(-1px); }
.wr-chip-suggest__ic { font-size: 13px; }

/* ── Blocs villes / métiers ── */
.wr-hero-search__block { margin-bottom: 12px; }
.wr-hero-search__block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.wr-hero-search__block-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--wr-ink, #1E1B2E);
}
.wr-hero-search__block-title svg { color: var(--wr-violet, #8A63C1); }

/* ⚠️  LE CHAMP EST UNE PUCE PARMI LES AUTRES, PAS UN BLOC À PART.

   Il vivait à droite du titre, sur sa propre ligne. Il ouvre maintenant la
   ligne des puces : même hauteur, même rayon, même bordure — l'œil lit une
   seule rangée, et le lien entre le champ et ce qu'il filtre devient
   évident.

   `flex: 0 1 200px` lui laisse la priorité sur une ligne large, et
   l'autorise à rétrécir avant de passer à la ligne. Une largeur fixe
   l'aurait fait déborder sur mobile. */
.wr-hero-search__mini {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 999px; padding: 6px 12px;
  color: var(--wr-muted-2, #9CA3AF); background: #fff;
  flex: 0 1 200px; min-width: 150px;
}
.wr-hero-search__mini:focus-within { border-color: var(--wr-violet-2, #A98AD3); }
.wr-hero-search__mini svg { width: 14px; height: 14px; flex: none; }
.wr-hero-search__mini-input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: 13px; color: var(--wr-ink, #1E1B2E);
}

.wr-hero-search__pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.wr-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12.5px; font-weight: 500; color: var(--wr-ink, #1E1B2E);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.wr-pill:hover {
  border-color: var(--wr-violet-2, #E4D9F5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.wr-pill.is-hidden { display: none; }
.wr-pill__ic { font-size: 13px; }
.wr-pill__arrow { width: 12px; height: 12px; color: var(--wr-muted-2, #9CA3AF); }

/* La pastille en cours de sélection.

   Elle reste visible même au-delà des douze premières : c'est le filtre
   actif, le cacher derrière « voir plus » obligerait à déplier la liste pour
   comprendre ce qui filtre la page.

   Sa flèche devient une croix (voir le gabarit) et son lien pointe vers la
   liste complète : le même clic qui l'a sélectionnée la désélectionne. */
.wr-pill.is-active {
  background: var(--wr-violet, #8A63C1);
  border-color: var(--wr-violet, #8A63C1);
  color: #fff;
  font-weight: 600;
}
.wr-pill.is-active:hover {
  border-color: var(--wr-violet-d, #6D4C9F);
  background: var(--wr-violet-d, #6D4C9F);
}
.wr-pill.is-active .wr-pill__arrow { color: rgba(255, 255, 255, .85); }
.wr-pill.is-active.is-hidden { display: inline-flex; }

/* ⚠️  PLUS DE `margin-top` : LE BOUTON SUIT LES PUCES.

   Il était poussé sur sa propre ligne par une marge haute. Placé dans le
   conteneur en `flex-wrap`, il se met naturellement à la suite du dernier
   élément visible — et ne passe à la ligne que si la place manque. */
.wr-hero-search__more {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px dashed var(--wr-violet-2, #E4D9F5);
  color: var(--wr-violet, #8A63C1);
  border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
/* ══════════════════════════════════════════════════════════════════════
   ⚠️  `display` ÉCRASE L'ATTRIBUT `hidden`.

   `hidden` n'est pas une propriété : c'est une règle de la feuille par
   défaut du navigateur, `[hidden] { display: none }`. N'importe quelle
   règle d'auteur posant un `display` la bat — et `inline-flex` ci-dessus
   le fait sur TOUS les boutons de la rangée.

   Conséquence : « Réduire », rendu avec `hidden` dans le gabarit,
   s'affichait quand même au chargement — jusqu'à ce que le JavaScript
   passe et le masque. Un bouton qui apparaît puis disparaît tout seul.

   La règle ci-dessous rétablit l'attribut. `!important` est justifié ici :
   il s'agit de restaurer un comportement du navigateur, pas d'en imposer
   un nouveau.
   ══════════════════════════════════════════════════════════════════════ */
.wr-hero-search__more[hidden] { display: none !important; }

.wr-hero-search__more svg { width: 13px; height: 13px; transition: transform .15s ease; }
.wr-hero-search__more.is-open svg { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════════
   LANDING PAGE PAR VILLE (wr-city-*)
   ══════════════════════════════════════════════════════════════════════ */
.wr-city-hero {
  padding: 48px 0 36px;
  background: linear-gradient(180deg, var(--wr-violet-softer, #F3EEFB) 0%, transparent 100%);
}
.wr-city-hero__title { margin-bottom: 14px; }
.wr-city-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.wr-section-title { font-size: 20px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0; }

.wr-city-html { margin-top: 8px; }

.wr-city-pricing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 720px; margin: 0 auto;
}
@media (max-width: 640px) { .wr-city-pricing { grid-template-columns: 1fr; } }

.wr-city-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 720px) { .wr-city-cta { grid-template-columns: 1fr; } }
.wr-city-cta__card {
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 8px 26px rgba(30, 27, 46, .06);
}
.wr-city-cta__role {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wr-violet, #8A63C1); margin-bottom: 12px;
}
.wr-city-cta__role svg { width: 16px; height: 16px; }
.wr-city-cta__title { font-size: 19px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 8px; }
.wr-city-cta__text { font-size: 14px; color: var(--wr-muted, #6B7280); line-height: 1.55; margin: 0 0 18px; }

/* ══════════════════════════════════════════════════════════════════════
   BLOCS DYNAMIQUES CMS — offres & entreprises (landing pages)
   ══════════════════════════════════════════════════════════════════════ */
.wr-cms-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }

/* ⚠️  UN TITRE SEUL A BESOIN DE PLUS D'AIR QU'UN TITRE AVEC SOUS-TITRE.

   Les 28 px ci-dessus sont calculés pour un bloc titre + sous-titre : la
   ligne grise fait tampon entre le gros caractère et la première card.
   Sans elle — le cas du bloc articles — les 28 px se retrouvent seuls
   sous un titre de 26 px, et la liste paraît lui être collée.

   `:only-child` cible exactement ce cas, sans classe supplémentaire à
   poser dans les gabarits. */
.wr-cms-head__title:only-child { margin-bottom: 0; }
.wr-cms-head:has(.wr-cms-head__title:only-child) { margin-bottom: 40px; }
.wr-cms-head__title {
  margin: 0 0 8px; font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; color: var(--wr-ink, #1E1B2E);
}
.wr-cms-head__sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wr-muted, #6B7280); }

.wr-cms-grid { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }

/* ⚠️  DANS CETTE GRILLE, CHAQUE RANGÉE EST UNE CARD À PART ENTIÈRE.

   `.wr-row` est écrit pour vivre DANS `.wr-list` : c'est le conteneur qui
   porte le fond, la bordure et le rayon, et la rangée n'a qu'un filet en
   bas pour la séparer de la suivante.

   `.wr-cms-grid` n'est pas une card — c'est une colonne espacée de 10 px.
   Les rangées y flottaient donc sans fond ni cadre, chacune traînant un
   filet dans le vide : dix pixels de blanc, un trait, dix pixels de
   blanc. On croyait à des cards mal alignées ; il n'y avait pas de card
   du tout.

   On les rend autonomes ici, sans toucher à `.wr-row` — ailleurs, le
   cadre de `.wr-list` reste le bon. */
.wr-cms-grid > .wr-row {
  background: var(--wr-card, #FFFFFF);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-lg, 14px);
  transition: border-color var(--wr-t, .15s), background var(--wr-t, .15s);
}

.wr-cms-grid > .wr-row:hover {
  border-color: var(--wr-violet-2, #A98AD3);
}

.wr-cms-more { text-align: center; margin-top: 22px; }

/* ══════════════════════════════════════════════════════════════════════
   PAGE CONTACT — « Nous suivre » : un réseau par ligne (icône + nom)
   ══════════════════════════════════════════════════════════════════════ */
.wr-contact__socials { display: flex; flex-direction: column; gap: 8px; }
.wr-contact__social {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 11px;
  color: var(--wr-ink, #1E1B2E); text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  width: fit-content;
}
.wr-contact__social:hover {
  border-color: var(--wr-violet, #8A63C1);
  background: #F8F4FD;
  color: var(--wr-violet, #8A63C1);
}
.wr-contact__social-ico { display: inline-flex; }
.wr-contact__social-ico svg { width: 18px; height: 18px; display: block; }
.wr-contact__social-name { line-height: 1; }

/* ══════════════════════════════════════════════════════════════════════
   ESPACE BUSINESS — comparatif 3 plateformes (Whileresume / LinkedIn / Indeed)
   ══════════════════════════════════════════════════════════════════════ */
.wr-versus {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 34px;
}
.wr-versus__card {
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* La nôtre : bord vert (comme la comparaison existante). */
.wr-versus__card--featured { border: 2px solid #34C77B; box-shadow: 0 14px 44px rgba(52, 199, 123, .12); }

.wr-versus__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; margin: 10px;
  background: var(--wr-violet-soft, #F2EDFA); border-radius: 14px;
}
.wr-versus__logo { display: inline-flex; flex-shrink: 0; }
.wr-versus__logo svg { width: 26px; height: 26px; display: block; }
.wr-versus__logo--whr { color: var(--wr-violet, #8A63C1); }
.wr-versus__logo--linkedin { color: #0A66C2; }
.wr-versus__logo--indeed { color: #2557A7; }
.wr-versus__name { font-size: 17px; font-weight: 800; color: var(--wr-ink, #1E1B2E); }

.wr-versus__body { padding: 6px 24px 26px; }
.wr-versus__row { padding: 18px 0; border-bottom: 1px solid var(--wr-line, #EEF1F7); }
.wr-versus__row:last-child { border-bottom: 0; }
.wr-versus__crit { font-size: 14.5px; color: var(--wr-muted, #6B7280); line-height: 1.4; margin-bottom: 10px; }
.wr-versus__val { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.wr-versus__val svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Statuts : positif (violet, la nôtre), neutre (orange, limité), négatif (rouge). */
.wr-versus__val--pos { color: var(--wr-violet, #8A63C1); }
.wr-versus__val--neutral { color: #E8A02C; }
.wr-versus__val--neg { color: #E5484D; }

@media (max-width: 860px) {
  .wr-versus { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE FAQ — bascule entreprises/candidats, CTA, état vide
   ══════════════════════════════════════════════════════════════════════ */
.wr-faq-switch { display: inline-flex; gap: 6px; margin-top: 22px; padding: 5px; background: #F1F3F7; border-radius: 12px; }
.wr-faq-switch__link {
  padding: 9px 18px; border-radius: 9px; font-size: 14.5px; font-weight: 700;
  color: var(--wr-muted, #6B7280); text-decoration: none; transition: all .15s ease;
}
.wr-faq-switch__link:hover { color: var(--wr-ink, #1E1B2E); }
.wr-faq-switch__link.is-active { background: #fff; color: var(--wr-violet, #8A63C1); box-shadow: 0 2px 8px rgba(30,27,46,.08); }

.wr-faq-empty { padding: 40px 0; text-align: center; }

.wr-faq-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 34px; padding: 22px; background: var(--wr-violet-softer, #F8F4FD);
  border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--wr-ink, #1E1B2E);
}

/* ══════════════════════════════════════════════════════════════════════
   ESPACE BUSINESS — sélecteur de devise
   ══════════════════════════════════════════════════════════════════════ */
.wr-currency {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 22px auto 0; padding: 8px 14px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 12px;
  box-shadow: 0 2px 10px rgba(30, 27, 46, .05);
}
.wr-currency__ico { width: 18px; height: 18px; color: var(--wr-violet, #8A63C1); flex-shrink: 0; }
.wr-currency__label { font-size: 13.5px; font-weight: 600; color: var(--wr-muted, #6B7280); }
.wr-currency__select {
  border: none; background: transparent; font-size: 14.5px; font-weight: 700;
  color: var(--wr-ink, #1E1B2E); cursor: pointer; padding: 2px 4px; outline: none;
  font-family: inherit;
}
.wr-currency__select:focus-visible { outline: 2px solid var(--wr-violet, #8A63C1); border-radius: 6px; }

/* ══════════════════════════════════════════════════════════════════════
   RECHERCHE LIVE — résultats affichés sous la barre de recherche
   ══════════════════════════════════════════════════════════════════════ */
[data-live-search] { position: relative; }

.wr-live {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(30, 27, 46, .10);
  overflow: hidden;
}

.wr-live__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 22px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wr-muted, #6B7280);
  border-bottom: 1px solid var(--wr-line, #EEF1F7);
}
.wr-live__count { color: var(--wr-violet, #8A63C1); }
.wr-live__all {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 700; color: var(--wr-ink, #1E1B2E); text-decoration: none;
}
.wr-live__all:hover { color: var(--wr-violet, #8A63C1); }

.wr-live__list { max-height: 60vh; overflow-y: auto; }

.wr-live__row {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid #F4F6FA;
  text-decoration: none; cursor: pointer;
  transition: background .12s ease;
}
.wr-live__row:last-child { border-bottom: 0; }
.wr-live__row:hover, .wr-live__row.is-active { background: var(--wr-violet-softer, #F8F4FD); }

.wr-live__logo {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
  overflow: hidden;
}
.wr-live__logo img { width: 100%; height: 100%; object-fit: cover; }
/* Pastilles colorées façon capture : la couleur varie par lettre. */
.wr-live__logo--letter { background: #F2EDFA; color: #8A63C1; }
.wr-live__row:nth-child(5n+1) .wr-live__logo--letter { background: #FEF3C7; color: #B45309; }
.wr-live__row:nth-child(5n+2) .wr-live__logo--letter { background: #D1FAE5; color: #047857; }
.wr-live__row:nth-child(5n+3) .wr-live__logo--letter { background: #FCE7F3; color: #BE185D; }
.wr-live__row:nth-child(5n+4) .wr-live__logo--letter { background: #DBEAFE; color: #1E40AF; }
.wr-live__row:nth-child(5n+5) .wr-live__logo--letter { background: #FED7AA; color: #C2410C; }

.wr-live__body { flex: 1; min-width: 0; }
.wr-live__title {
  display: block; font-size: 16px; font-weight: 700; color: var(--wr-ink, #1E1B2E);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-live__sub {
  display: block; margin-top: 3px; font-size: 13.5px; color: var(--wr-muted, #6B7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-live__arrow { width: 18px; height: 18px; flex: none; color: var(--wr-muted-2, #C4C8D0); }

.wr-live__empty { padding: 26px 22px; text-align: center; color: var(--wr-muted, #6B7280); font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   PROFIL PUBLIC D'UN CANDIDAT — /cv/{id}
   ══════════════════════════════════════════════════════════════════════ */
.wr-cvp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;

  /* ⚠️  `start`, ET AUSSI `align-self` SUR CHAQUE COLONNE (plus bas).

     La valeur par défaut d'une grille est `stretch` : les deux colonnes
     prendraient la hauteur de la plus haute. Ici, ce n'est pas seulement une
     question de hauteur — la colonne latérale est `sticky`, et un élément
     collant étiré sur toute la hauteur n'a plus de place pour coller : il ne
     bouge jamais, ou il flotte selon le navigateur. Le déclarer aux deux
     endroits protège d'un `align-items` changé un jour dans une règle
     responsive, sans qu'on refasse le lien avec la colonne collante. */
  align-items: start;
}
.wr-cvp__main, .wr-cvp__aside { align-self: start; }
@media (max-width: 900px) { .wr-cvp { grid-template-columns: 1fr; } }

/* ── En-tête ── */
/* L'en-tête est une card, comme les sections qui la suivent : la page est
   une pile de blocs, pas un bloc avec des traits de séparation. */
.wr-cvp__head {
  display: flex; align-items: flex-start; gap: 18px;
  background: #fff; border: 1.5px solid #EEE7DA; border-radius: 16px;
  padding: 22px; margin-bottom: 14px;
}
@media (max-width: 640px) { .wr-cvp__head { padding: 16px; gap: 14px; } }
.wr-cvp__avatar {
  width: 72px; height: 72px; flex: none; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; overflow: hidden;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
}
.wr-cvp__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Le cadenas sur l'avatar par défaut : il n'apparaît QUE si une photo
   existe réellement. Sans cette condition (posée dans le gabarit), on
   promettrait une image à débloquer là où le candidat n'en a jamais mis. */
.wr-cvp__avatar--letter { position: relative; }
.wr-cvp__avatarlock {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--wr-violet, #8A63C1);
  box-shadow: 0 2px 8px rgba(30, 27, 46, .16);
}
.wr-cvp__avatarlock svg { width: 12px; height: 12px; }
.wr-cvp__headmain { min-width: 0; padding-top: 4px; }
.wr-cvp__name { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; color: var(--wr-ink, #1E1B2E); }
.wr-cvp__job { font-size: 16px; font-weight: 600; color: var(--wr-violet, #8A63C1); margin-bottom: 10px; }

/* La référence publique. En `code` : c'est une chaîne à recopier
   exactement, une police à chasse fixe évite de confondre 0/O et 1/l. */
.wr-cvp__ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px 10px 4px 8px;
  border-radius: 100px;
  background: var(--wr-bg, #F8F9FC);
  border: 1px solid var(--wr-line, #EEF1F7);
  font-size: 12px;
  color: var(--wr-muted, #6B7280);
}
.wr-cvp__ref svg { width: 13px; height: 13px; flex: none; }
.wr-cvp__ref code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
  letter-spacing: .01em;
}
.wr-cvp__meta { display: flex; flex-wrap: wrap; gap: 16px; }
.wr-cvp__metaitem { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--wr-muted, #6B7280); }
.wr-cvp__metaitem svg { width: 15px; height: 15px; }

/* ── Sections ── */
/* ⚠️  DES CARDS, PLUS DES TRAITS DE SÉPARATION.

   `border-top` sur chaque section donnait un seul bloc découpé de filets —
   lisible sur trois sections, illisible sur huit. Et il fallait la règle
   `:first-of-type` pour retirer le trait du haut : le signe qu'on
   dessinait des séparateurs là où on voulait des blocs. */
.wr-cvp__section {
  background: #fff; border: 1.5px solid #EEE7DA; border-radius: 16px;
  padding: 20px 22px; margin-bottom: 14px;
}
@media (max-width: 640px) { .wr-cvp__section { padding: 16px; } }
.wr-cvp__section h2 { font-size: 16px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 12px; }

/* ⚠️  UN TITRE AVEC ICÔNE EST UNE LIGNE FLEX, PAS UN `vertical-align`.

   `vertical-align` déplace l'image par rapport à la ligne de base du texte :
   la bonne valeur dépend de la police, de sa taille ET de sa hauteur de
   ligne. Elle est juste le jour où on l'écrit, fausse au premier changement
   de l'un des trois — et personne ne fait le lien.

   `align-items: center` centre l'icône sur la hauteur réelle du texte, sans
   valeur magique. `flex: none` l'empêche d'être écrasée quand le titre est
   long, et `align-self: flex-start` la garde en tête d'un titre replié sur
   deux lignes (certaines langues doublent la longueur du libellé). */
.wr-cvp__h2ico { display: flex; align-items: center; gap: 7px; }
.wr-cvp__h2ico svg { width: 18px; height: 18px; flex: none; }
.wr-cvp__h2ico span { min-width: 0; }

@media (max-width: 480px) {
  .wr-cvp__h2ico { align-items: flex-start; }
  .wr-cvp__h2ico svg { margin-top: 2px; }
}
.wr-cvp__text { font-size: 14.5px; line-height: 1.65; color: #3F4451; margin: 0; }
.wr-cvp__muted { font-size: 14px; color: var(--wr-muted, #6B7280); font-style: italic; }

/* ── Présentation en amorce ──
   ⚠️  LE DÉGRADÉ NE MASQUE RIEN — IL LE SIGNALE.

   Le texte est DÉJÀ coupé côté serveur (routes/public.js) : la suite n'est
   pas dans la page. Un dégradé posé sur un texte complet donnerait
   l'illusion d'un verrou, avec le texte entier lisible dans le HTML. */
.wr-cvp__presentation { position: relative; }
.wr-cvp__presentation.is-teaser::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%);
}

.wr-cvp__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wr-violet, #8A63C1);
  text-decoration: none;
}
.wr-cvp__more:hover { text-decoration: underline; }
.wr-cvp__more svg { width: 15px; height: 15px; transition: transform .18s ease; }
.wr-cvp__more:hover svg { transform: translateX(3px); }

.wr-cvp__ai-points { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.wr-cvp__ai-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #3F4451; }
.wr-cvp__ai-points svg { width: 16px; height: 16px; flex: none; color: #10B981; margin-top: 2px; }

/* ── Analyse verrouillée (flou + message) ── */
.wr-cvp__locked { position: relative; border-radius: 14px; overflow: hidden; }
.wr-cvp__blur { filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; padding: 4px; }
.wr-cvp__lockmsg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.9));
}
.wr-cvp__lockmsg svg { width: 26px; height: 26px; color: var(--wr-violet, #8A63C1); }
.wr-cvp__lockmsg span { font-size: 13.5px; font-weight: 600; color: var(--wr-ink, #1E1B2E); max-width: 320px; }

/* ── Colonne latérale ── */
/* ⚠️  `top: 24px`, PLUS 88.

   La colonne collante se décrochait 88 px sous le haut de la fenêtre — la
   hauteur de l'ancien en-tête fixe. Résultat : dès le premier défilement,
   elle sautait vers le bas et ne revenait au niveau de la colonne de gauche
   qu'en haut de page. Les deux colonnes commencent au même endroit, et la
   latérale suit sans décrochage visible. */
.wr-cvp__aside { position: sticky; top: 24px; display: grid; gap: 16px; margin-top: 0; }
@media (max-width: 900px) { .wr-cvp__aside { position: static; } }

/* ⚠️  LE MÊME CHROME QUE LES CARDS DE GAUCHE.

   Bordure de 1 px contre 1,5 px, rayon de 18 contre 16, et une ombre portée
   d'un seul côté : les deux colonnes commençaient à la même hauteur mais ne
   se lisaient pas comme alignées — l'œil compare les bords, et deux bords
   qui n'ont ni la même épaisseur ni la même courbe ne se répondent pas.
   Valeurs reprises de `.wr-cvp__head` et `.wr-cvb__sec`. */
.wr-cvp__card {
  background: #fff; border: 1.5px solid #EEE7DA;
  border-radius: 16px; padding: 22px;
}
.wr-cvp__card-ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
}
.wr-cvp__card-ico svg { width: 22px; height: 22px; }
.wr-cvp__card-title { font-size: 17px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 8px; }
.wr-cvp__card-desc { font-size: 13.5px; line-height: 1.55; color: var(--wr-muted, #6B7280); margin: 0 0 16px; }

/* ── Formulaire du 1er message ── */
.wr-cvp__form { display: grid; gap: 10px; }
.wr-cvp__label { font-size: 13px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-cvp__textarea {
  width: 100%; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; font-family: inherit; resize: vertical;
  color: var(--wr-ink, #1E1B2E); background: #FAFBFD;
}
.wr-cvp__textarea:focus { outline: none; border-color: var(--wr-violet, #8A63C1); background: #fff; }

/* ── Verrous ── */
.wr-cvp__gate, .wr-cvp__premlock {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 12px; margin-bottom: 14px;
  background: var(--wr-violet-softer, #F8F4FD);
}
.wr-cvp__gate svg, .wr-cvp__premlock svg { width: 22px; height: 22px; flex: none; color: var(--wr-violet, #8A63C1); }
.wr-cvp__gate p, .wr-cvp__premlock p { margin: 0; font-size: 13px; color: #3F4451; }
.wr-cvp__premlock { background: #FFF7ED; }
.wr-cvp__premlock svg { color: #EA580C; }

/* ── Card premium ── */
.wr-cvp__card--premium {
  position: relative;
  background: linear-gradient(135deg, #8A63C1, #6D4BA8);
  border: none; color: #fff;
}
.wr-cvp__card--premium .wr-cvp__card-title { color: #fff; }
.wr-cvp__card--premium .wr-cvp__card-desc { color: rgba(255,255,255,.85); }
.wr-cvp__prembadge {
  display: inline-block; margin-bottom: 12px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,.2); color: #fff;
}
.wr-cvp__card--premium .wr-btn--primary { background: #fff; color: #8A63C1; }
.wr-cvp__card--premium .wr-btn--primary:hover { background: #F2EDFA; }

/* ══════════════════════════════════════════════════════════════════════
   PAGE OFFRES — barre de recherche compacte + drawer de filtres
   ══════════════════════════════════════════════════════════════════════ */
.wr-jobsearch { margin-bottom: 24px; }

.wr-jobsearch__bar { display: flex; align-items: center; gap: 10px; }

.wr-jobsearch__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 100px;
  padding: 0 18px; height: 52px;
  box-shadow: 0 2px 10px rgba(30, 27, 46, .04);
}
.wr-jobsearch__icon { width: 20px; height: 20px; flex: none; color: var(--wr-muted, #9AA0AC); }
.wr-jobsearch__input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 15px; color: var(--wr-ink, #1E1B2E); font-family: inherit;
}

/* Bouton loupe (submit) */
.wr-jobsearch__go {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wr-violet, #8A63C1); color: #fff; border: none; cursor: pointer;
  transition: background .12s ease, transform .1s ease;
}
.wr-jobsearch__go:hover { background: #764FB0; transform: translateY(-1px); }
.wr-jobsearch__go svg { width: 20px; height: 20px; }

/* Bouton filtres */
.wr-jobsearch__filters {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 20px; border-radius: 100px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--wr-ink, #1E1B2E); font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.wr-jobsearch__filters:hover { border-color: #D9CEF0; background: var(--wr-violet-softer, #F8F4FD); }
.wr-jobsearch__filters svg { width: 18px; height: 18px; }
.wr-jobsearch__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
  background: var(--wr-violet, #8A63C1); color: #fff; font-size: 12px; font-weight: 800;
}
@media (max-width: 620px) {
  .wr-jobsearch__filters span { display: none; }
  .wr-jobsearch__filters { padding: 0 16px; }
}

/* ── Drawer (slide de droite) ── */
.wr-fdrawer { position: fixed; inset: 0; z-index: 1200; }
.wr-fdrawer[hidden] { display: none; }
.wr-fdrawer__backdrop {
  position: absolute; inset: 0; background: rgba(20, 18, 33, .45);
  opacity: 0; transition: opacity .25s ease;
}
.wr-fdrawer.is-open .wr-fdrawer__backdrop { opacity: 1; }

.wr-fdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 90vw);
  background: #fff; display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(30, 27, 46, .18);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.wr-fdrawer.is-open .wr-fdrawer__panel { transform: translateX(0); }

.wr-fdrawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--wr-line, #EEF1F7);
}
.wr-fdrawer__title { font-size: 18px; font-weight: 800; margin: 0; color: var(--wr-ink, #1E1B2E); }
.wr-fdrawer__close {
  width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--wr-violet-softer, #F5F1FB); color: var(--wr-ink, #1E1B2E);
}
.wr-fdrawer__close svg { width: 18px; height: 18px; }

/* ⚠️  `align-content: start` — C'EST LUI QUI MANQUAIT.

   Le corps du tiroir est une grille (`display: grid`) qui remplit toute la
   hauteur du panneau (`flex: 1`). Sans consigne d'alignement, la valeur par
   défaut est `stretch` : les lignes AUTO s'étirent pour occuper l'espace
   libre. Avec trois groupes de filtres dans un tiroir plein écran, chacun
   récupérait un tiers de la hauteur — d'où deux cents pixels de vide entre
   « Type de contrat » et « Télétravail ».

   Ce n'était donc pas la gouttière qui était trop grande : elle vaut 26 px
   et n'a jamais bougé. C'est l'espace restant qui était réparti entre les
   groupes. `start` les empile en haut, et la gouttière redevient la seule
   chose qui les sépare — 20 px suffisent alors.

   ⚠️  LE SYMPTÔME REVIENDRAIT AVEC UN SEUL GROUPE MASQUÉ.
       Moins il y a de filtres affichés, plus le vide grandissait. Un écran
       sans facettes de villes aurait paru complètement cassé. */
.wr-fdrawer__body {
  flex: 1; overflow-y: auto; padding: 22px;
  display: grid; gap: 20px;
  align-content: start;
}

.wr-fgroup__label {
  display: block; margin-bottom: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wr-muted, #6B7280);
}
.wr-fgroup__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.wr-fmore {
  border: none; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--wr-violet, #8A63C1);
  padding: 6px 4px; font-family: inherit;
}
.wr-fmore:hover { text-decoration: underline; }

.wr-fdrawer__foot {
  padding: 16px 22px; border-top: 1px solid var(--wr-line, #EEF1F7);
  display: grid; gap: 10px;
}

/* Chevron des facettes (chips backoffice sans compteur). */
.wr-facet__arrow { width: 15px; height: 15px; flex: none; color: var(--wr-muted-2, #C4C8D0); }
.wr-facet__item:hover .wr-facet__arrow { color: var(--wr-violet, #8A63C1); }

/* Recherche live sur l'accueil : message quand aucune offre. */
.wr-home-empty {
  padding: 28px 8px; text-align: center;
  color: var(--wr-muted, #6B7280); font-size: 14.5px;
}

/* Excerpt dans une ligne d'article (liste simple, sans CTA). */
.wr-row__desc {
  display: block; margin-top: 2px;
  font-size: 13px; line-height: 1.5; color: var(--wr-muted, #6B7280);
}
.wr-clamp-1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   BASE DE DONNÉES — sitemap (articles par catégorie, villes, métiers)
   ══════════════════════════════════════════════════════════════════════ */
.wr-sitemap__section { margin-bottom: 44px; }

.wr-sitemap__h {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800; color: var(--wr-ink, #1E1B2E);
  margin: 0 0 20px;
}
.wr-sitemap__h svg { width: 22px; height: 22px; color: var(--wr-violet, #8A63C1); }

.wr-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}

.wr-sitemap__card {
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(30, 27, 46, .04);
}

.wr-sitemap__cardhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.wr-sitemap__cardtitle { font-size: 15px; font-weight: 800; color: var(--wr-ink, #1E1B2E); }
.wr-sitemap__cardcount {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
  font-size: 12px; font-weight: 800;
}

.wr-sitemap__search {
  display: flex; align-items: center; gap: 8px;
  background: #FAFBFD; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 10px;
  padding: 0 12px; height: 38px; margin-bottom: 12px;
}
.wr-sitemap__search svg { width: 16px; height: 16px; flex: none; color: var(--wr-muted, #9AA0AC); }
.wr-sitemap__search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 13.5px; color: var(--wr-ink, #1E1B2E); font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️  HAUTEUR FIXE ET DÉFILEMENT : TOUT EST AFFICHÉ, LA PAGE RESTE COURTE.

   Ces listes montraient douze entrées et un bouton « Voir plus ». Sur un
   plan du site, c'est l'inverse de ce qu'on vient chercher : chaque clic
   rallongeait la page et repoussait les cards suivantes hors de l'écran.

   `max-height` plutôt que `height` : une liste de cinq villes ne doit pas
   occuper 380 px de vide. La zone ne défile que lorsqu'elle déborde.

   `overscroll-behavior: contain` : arrivé en bas de la liste, la molette ne
   doit pas emporter la PAGE — sinon on quitte la section sans l'avoir voulu,
   ce qui rend le défilement interne très désagréable au trackpad.
   ══════════════════════════════════════════════════════════════════════ */
.wr-sitemap__list {
  list-style: none; margin: 0; padding: 0 4px 0 0;
  display: grid; gap: 2px;

  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Une barre discrète : sur trois listes côte à côte, trois barres
     système à leur largeur par défaut sautent aux yeux plus que le
     contenu. */
  scrollbar-width: thin;
  scrollbar-color: var(--wr-line-2, #DDE3EE) transparent;
}

.wr-sitemap__list::-webkit-scrollbar { width: 8px; }
.wr-sitemap__list::-webkit-scrollbar-track { background: transparent; }
.wr-sitemap__list::-webkit-scrollbar-thumb {
  background: var(--wr-line-2, #DDE3EE); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.wr-sitemap__list::-webkit-scrollbar-thumb:hover { background-color: var(--wr-violet-2, #A98AD3); background-clip: content-box; }

/* Sur mobile, 380 px prennent presque tout l'écran : on raccourcit. */
@media (max-width: 700px) {
  .wr-sitemap__list { max-height: 260px; }
}
.wr-sitemap__list li { margin: 0; }
.wr-sitemap__list a {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.4; color: #3F4451; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s ease, color .12s ease;
}
.wr-sitemap__list a:hover { background: var(--wr-violet-softer, #F8F4FD); color: var(--wr-violet, #8A63C1); }

.wr-sitemap__noresult { padding: 10px; text-align: center; color: var(--wr-muted, #9AA0AC); font-size: 13px; }
.wr-sitemap__empty { padding: 40px 8px; text-align: center; color: var(--wr-muted, #6B7280); }

/* Section articles de l'accueil en pleine largeur (100% de la zone contenu). */
.wr-articles-full {
  width: 100%;
  max-width: 100%;
  padding: 0 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   ARTICLE — mise en page cards
   ══════════════════════════════════════════════════════════════════════ */
.wr-article { padding: 32px 0 64px; }
.wr-article__card {
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 20px; padding: 36px 40px;
  box-shadow: 0 4px 20px rgba(30, 27, 46, .05);
  margin-bottom: 24px;
}
@media (max-width: 640px) { .wr-article__card { padding: 24px 22px; } }

.wr-article__cat { margin-bottom: 18px; }
.wr-article__title { font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 16px; color: var(--wr-ink, #1E1B2E); }
.wr-article__excerpt { font-size: 17px; line-height: 1.6; color: #4B5162; margin: 0 0 22px; }
.wr-article__byline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--wr-muted, #6B7280); }
.wr-avatar--sm { width: 34px; height: 34px; font-size: 14px; }
.wr-article__author { font-weight: 700; color: var(--wr-ink, #1E1B2E); }

/* La couverture n'est plus affichée dans la fiche d'article : les règles
   `.wr-article__cover` et `.wr-article__cover-wrap` ont été retirées avec
   elle. Le champ existe toujours en base et sert aux vignettes de listes
   (`.wr-post__cover`) et à `og:image`. */

.wr-article__share { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--wr-line, #EEF1F7); }

/* ══════════════════════════════════════════════════════════════════════
   SOMMAIRE — bulle + panneau
   ══════════════════════════════════════════════════════════════════════ */
.wr-toc-bubble {
  position: fixed; left: var(--wr-toc-left, 24px); bottom: 24px; z-index: 1100;
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px; border-radius: 100px; border: none; cursor: pointer;
  background: #1E1B2E; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit;
  box-shadow: 0 8px 26px rgba(30, 27, 46, .28);
  transition: transform .12s ease, background .12s ease;
}
.wr-toc-bubble:hover { transform: translateY(-2px); background: #2C2740; }
.wr-toc-bubble svg { width: 18px; height: 18px; }
.wr-toc-bubble__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px;
  background: var(--wr-violet, #8A63C1); color: #fff; font-size: 12px; font-weight: 800;
}

/* ⚠️  `left` PART DU BORD DE LA SIDEBAR, PAS DU BORD DE L'ÉCRAN.

   En `left: 24px`, le panneau se posait SUR la sidebar de l'espace
   connecté : il masquait la navigation, et deux surfaces se disputaient le
   même coin. `--wr-toc-left` vaut 24 px sur les pages sans coquille, et la
   largeur de la sidebar plus une gouttière dès qu'il y en a une.

   La variable est redéfinie par `.wr-shell` (plus bas) : elle suit donc
   automatiquement le repli de la sidebar à 68 px, sans qu'un second
   sélecteur ait à connaître cette valeur. */
.wr-toc {
  /* ⚠️  LE PANNEAU S'ALIGNE SUR SON BOUTON.

     Je l'avais décalé après la sidebar pour ne pas la masquer. Le résultat
     était pire : le panneau s'ouvrait à côté du bouton qui l'avait
     déclenché, sans lien visuel entre les deux — on ne comprend pas d'où
     il sort.

     Un panneau surgissant s'ancre à son déclencheur. Il couvre la
     navigation le temps qu'il est ouvert, et c'est le comportement normal
     de ce genre de surface : temporaire, et refermée d'un clic. */
  position: fixed; left: var(--wr-toc-left, 24px); bottom: 84px; z-index: 1100;
  width: min(340px, calc(100vw - 48px)); max-height: min(70vh, 600px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(30, 27, 46, .22);
  opacity: 0; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease;
}
.wr-toc.is-open { opacity: 1; transform: translateY(0); }
.wr-toc[hidden] { display: none; }
.wr-toc__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--wr-line, #EEF1F7);
}
.wr-toc__title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--wr-ink, #1E1B2E); }
.wr-toc__title svg { width: 17px; height: 17px; color: var(--wr-violet, #8A63C1); }
.wr-toc__close { width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; border-radius: 8px; color: var(--wr-muted, #6B7280); }
.wr-toc__close:hover { background: var(--wr-violet-softer, #F5F1FB); }
.wr-toc__close svg { width: 16px; height: 16px; }

.wr-toc__list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; }
.wr-toc__item a {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.4; color: #4B5162; text-decoration: none;
  border-left: 2px solid transparent;
}
.wr-toc__item a:hover { background: var(--wr-violet-softer, #F8F4FD); color: var(--wr-violet, #8A63C1); }
.wr-toc__item a.is-active { color: var(--wr-violet, #8A63C1); font-weight: 700; border-left-color: var(--wr-violet, #8A63C1); background: var(--wr-violet-softer, #F8F4FD); }
.wr-toc__item--l3 a { padding-left: 22px; font-size: 13px; }
.wr-toc__item--l4 a { padding-left: 34px; font-size: 12.5px; color: #6B7280; }

/* ══════════════════════════════════════════════════════════════════════
   SHORTCODES — cards jobs + carte OSM
   ══════════════════════════════════════════════════════════════════════ */
.wr-sc-jobs { margin: 28px 0; }
.wr-sc-jobs__grid { display: grid; gap: 10px; }
.wr-sc-jobcard {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  background: #FAFBFD; border: 1px solid var(--wr-line, #EEF1F7); text-decoration: none;
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.wr-sc-jobcard:hover { border-color: #D9CEF0; background: #fff; transform: translateY(-1px); }
.wr-sc-jobcard__logo {
  width: 44px; height: 44px; flex: none; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
  font-weight: 800; font-size: 17px;
}
.wr-sc-jobcard__logo img { width: 100%; height: 100%; object-fit: cover; }
.wr-sc-jobcard__body { min-width: 0; }
.wr-sc-jobcard__title { display: block; font-size: 15px; font-weight: 700; color: var(--wr-ink, #1E1B2E); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-sc-jobcard__meta { display: block; font-size: 13px; color: var(--wr-muted, #6B7280); margin-top: 2px; }

.wr-sc-map { margin: 28px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--wr-line, #EEF1F7); }
.wr-sc-map__canvas { width: 100%; height: 360px; }

/* Encadré CTA (shortcode custom exemple). */
.wr-sc-cta {
  margin: 28px 0; padding: 28px; border-radius: 18px; text-align: center;
  background: linear-gradient(135deg, var(--wr-violet-softer, #F8F4FD), #fff);
  border: 1px solid var(--wr-line, #EEF1F7);
}
.wr-sc-cta h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--wr-ink, #1E1B2E); }
.wr-sc-cta p { font-size: 14.5px; color: #4B5162; margin: 0 0 18px; }
.wr-sc-cta__btn {
  display: inline-block; padding: 11px 24px; border-radius: 100px;
  background: var(--wr-violet, #8A63C1); color: #fff; font-weight: 700; text-decoration: none;
}
.wr-sc-cta__btn:hover { background: #764FB0; }

/* ══════════════════════════════════════════════════════════════════════
   LANDING ENTREPRISE PAR VILLE (/business/city/{slug})
   ══════════════════════════════════════════════════════════════════════ */

/* Entreprises locales — grille de cards */
.wr-bcity-companies {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .wr-bcity-companies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wr-bcity-companies { grid-template-columns: 1fr; } }
.wr-bcity-company {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 20px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); text-decoration: none;
  transition: border-color .12s ease, transform .1s ease;
}
.wr-bcity-company:hover { border-color: #D9CEF0; transform: translateY(-2px); }
.wr-bcity-company__logo {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
  font-weight: 800; font-size: 20px;
}
.wr-bcity-company__logo img { width: 100%; height: 100%; object-fit: cover; }
.wr-bcity-company__name { font-size: 14px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-bcity-company__city { font-size: 11.5px; color: var(--wr-muted, #6B7280); }

/* Candidats anonymes — grille de cards */
.wr-bcity-candidates {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .wr-bcity-candidates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wr-bcity-candidates { grid-template-columns: 1fr; } }
.wr-bcity-cand {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
}
.wr-bcity-cand__avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}
.wr-bcity-cand__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wr-bcity-cand__title { font-size: 14px; font-weight: 700; color: var(--wr-ink, #1E1B2E); line-height: 1.3; }
.wr-bcity-cand__meta { font-size: 12px; color: var(--wr-muted, #6B7280); }
.wr-bcity-cand__skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.wr-bcity-cand__skill {
  font-size: 11px; font-weight: 600; color: #475569;
  background: #F1F5F9; padding: 3px 9px; border-radius: 100px;
}

/* CTA finale */
.wr-bcity-cta {
  text-align: center; padding: 44px 32px; border-radius: 26px;
  background: linear-gradient(135deg, #8A63C0, #9D7BCC);
  box-shadow: 0 20px 50px -14px rgba(138, 99, 192, .4);
}
.wr-bcity-cta__title { font-size: 27px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -.02em; }
.wr-bcity-cta__sub { font-size: 15px; color: rgba(255,255,255,.9); margin: 0 0 22px; }
.wr-bcity-cta__btn { background: #fff; color: var(--wr-violet-dark, #6B47A6); }
.wr-bcity-cta__btn:hover { background: #F8F4FD; color: var(--wr-violet-dark, #6B47A6); }

/* Liste « recruter par ville » (espace business) */
.wr-bcity-list { display: flex; flex-wrap: wrap; gap: 10px; }
.wr-bcity-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 100px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  font-size: 14px; font-weight: 600; color: var(--wr-ink, #1E1B2E); text-decoration: none;
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.wr-bcity-chip:hover { border-color: #D9CEF0; background: var(--wr-violet-softer, #F8F4FD); transform: translateY(-1px); color: var(--wr-violet-dark, #6B47A6); }
.wr-bcity-chip__icon { font-size: 16px; }

/* Bouton « Voir plus » du sitemap (pagination continue) */
/* `.wr-sitemap__more` a été retiré avec la pagination : les listes
   affichent tout dans une zone défilante. Le style est supprimé plutôt que
   laissé « au cas où » — une règle qui ne s'applique à rien finit par être
   recopiée ailleurs et fait croire que le bouton existe encore. */

/* Barre de filtres seule (page offres — la recherche est dans le hero) */
.wr-jobsearch__bar--filters-only {
  display: flex; justify-content: flex-end; margin-bottom: 8px;
}

/* Recherche globale des articles (page Base de données) */
.wr-artsearch {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 8px;
  max-width: 520px;
}
.wr-artsearch svg { width: 18px; height: 18px; color: var(--wr-violet, #8A63C1); flex: none; }
.wr-artsearch input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--wr-ink, #1E1B2E); font-family: inherit;
}
.wr-artsearch__count { font-size: 12px; font-weight: 700; color: var(--wr-violet, #8A63C1); white-space: nowrap; }
.wr-artsearch__empty { margin: 4px 0 16px; font-size: 14px; color: var(--wr-muted, #6B7280); }

/* Bandeau de confirmation sur la page de connexion (retour de déconnexion) */
.wr-auth__notice {
  display: flex; align-items: center; gap: 8px;
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857;
  border-radius: 12px; padding: 11px 14px; margin-bottom: 18px;
  font-size: 13.5px; font-weight: 600;
}
.wr-auth__notice svg { flex: none; }

/* ── Page de support ── */
.wr-support__head { text-align: center; margin-bottom: 32px; }
.wr-support__title { margin: 0 0 10px; font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--wr-ink, #1E1B2E); }
.wr-support__lede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wr-muted, #6B7280); }
.wr-support__form {
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px; padding: 28px;
}
@media (max-width: 600px) { .wr-support__form { padding: 20px 16px; } }

.wr-support__done {
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px; padding: 44px 28px; text-align: center;
}
.wr-support__check {
  width: 56px; height: 56px; border-radius: 50%;
  background: #ECFDF5; color: #047857;
  display: grid; place-items: center; margin: 0 auto 18px;
}
.wr-support__done h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--wr-ink, #1E1B2E); }
.wr-support__done p { margin: 0 0 22px; font-size: 14px; color: var(--wr-muted, #6B7280); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════
   CASE ANTI-ROBOT

   ⚠️  ON NE REDIMENSIONNE PAS LE WIDGET.

   C'est une iframe servie par Google : lui appliquer un `transform: scale()`
   pour la faire tenir dans une colonne étroite la rend floue et décale la
   zone cliquable de la case. On lui laisse ses 302×76 px et on gère
   l'espace autour — sur mobile, elle déborde plutôt que de devenir
   inutilisable.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-captcha {
  margin: 4px 0 16px;
  /* Le widget a une largeur fixe : sur un écran étroit, on préfère un
     défilement horizontal local à un débordement de toute la page. */
  overflow-x: auto;
}

.wr-captcha__noscript {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FDE68A;
}

/* ══════════════════════════════════════════════════════════════════════════
   SURLIGNAGE GLISSANT DE LA NAVIGATION

   Une seule pastille se déplace sous le lien survolé. L'œil suit un objet
   qui bouge au lieu de voir un fond s'éteindre ici et s'allumer là — c'est
   toute la différence entre deux états et un geste.
   ══════════════════════════════════════════════════════════════════════════ */

/* La barre devient le repère de positionnement de la pastille. Sans ça,
   `offsetLeft` se calculerait par rapport à un ancêtre plus lointain et la
   pastille atterrirait à côté. */
.wr-nav { position: relative; }

.wr-nav__glisseur {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;

  height: 34px;
  width: 0;                    /* sans JS : invisible, et sans surprise */
  opacity: 0;

  border-radius: var(--wr-r-sm, 8px);
  background: var(--wr-violet-soft, #F2EDFA);
  pointer-events: none;        /* ne doit jamais voler un clic au lien */

  /* ⚠️  ON ANIME `transform` ET `width`, PAS `left`.

     `transform` est traité par le compositeur : le déplacement ne déclenche
     ni recalcul de mise en page, ni repeinture des liens. Animer `left`
     relayouterait la barre à chaque image — visible dès qu'une page charge
     en même temps.

     La courbe est volontairement « appuyée » (départ franc, arrivée douce) :
     c'est ce qui fait qu'un objet paraît avoir du poids plutôt que de
     glisser sur de la glace. */
  transform: translateX(0);
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    width     .28s cubic-bezier(.22, 1, .36, 1),
    opacity   .18s ease;

  /* ⚠️  CENTRAGE PAR `margin-top`, PAS PAR UNE TRANSLATION Y.

     Le réflexe serait `translate(x, -50%)`. Impossible ici : le script écrit
     `transform: translateX(...)` pour déplacer la pastille, et écraserait la
     composante Y à chaque survol — la pastille tomberait sous la barre.

     La marge négative fait le même travail sur un autre axe de propriétés :
     les deux cohabitent sans se disputer. Sa valeur est la moitié de la
     hauteur ci-dessus ; changer l'une sans l'autre décentre. */
  margin-top: -17px;   /* = -height / 2 */
}

/* Les liens passent AU-DESSUS de la pastille. Sans ça, elle les recouvrirait
   et le texte disparaîtrait au survol. */
.wr-nav__link { position: relative; z-index: 1; }

/* ⚠️  LE SURVOL INDIVIDUEL NE S'ÉTEINT QUE SI LE SCRIPT TOURNE.

   `.a-glisseur` est posée par `wr-nav-glisse.js`. Éteindre le fond des liens
   dans tous les cas laisserait une navigation sans aucun retour visuel au
   survol si le script échoue, est bloqué, ou si le visiteur a demandé la
   réduction des animations — trois situations où la barre doit rester
   utilisable. */
.wr-nav.a-glisseur .wr-nav__link:hover {
  background: transparent;
}

/* Le trait de la page courante reste au-dessus de la pastille : « vous êtes
   ici » ne doit pas être effacé par « vous survolez ceci ». */
.wr-nav__link.is-active::after { z-index: 2; }

/* ══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE — sans drapeaux, en bout de barre
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️  PAS `margin-left: auto` ICI — ELLE N'AURAIT AUCUN EFFET.

   Le réflexe serait de pousser le sélecteur au bord avec une marge
   automatique. Mais `.wr-header__actions` n'a pas de `flex: 1` : sa largeur
   est celle de son contenu. Il n'y a donc AUCUN espace libre à consommer, et
   la marge ne déplacerait rien. C'est le genre de règle qu'on écrit, qu'on ne
   voit pas agir, et qu'on laisse en place en croyant qu'elle fait quelque
   chose.

   Ce qu'on veut vraiment n'est pas « au bord » — il y est déjà, en dernière
   position — mais DÉTACHÉ des boutons qui le précèdent. Une gouttière plus
   large et un filet le sortent du chemin de lecture des actions : à gauche du
   filet, ce que le produit propose de faire ; à droite, un réglage de
   confort. */
.wr-lang {
  position: relative;
  margin-left: 8px;      /* s'ajoute au `gap: 10px` du conteneur */
  padding-left: 16px;
}

.wr-lang::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--wr-line, #EEF1F7);
}

/* Le code seul : plus étroit qu'un drapeau suivi d'un code, et de largeur
   constante d'une langue à l'autre — la barre ne bouge pas au changement. */
.wr-lang__code {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
}

/* Dans le panneau, le code tient le rôle d'alignement qu'occupait le
   drapeau : sans lui, les noms de langue flottent contre le bord. */
.wr-lang__abbr {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--wr-violet-softer, #F8F4FD);
  color: var(--wr-violet-dark, #6B47A6);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
}

.wr-lang__item.is-current .wr-lang__abbr {
  background: var(--wr-violet, #8A63C1);
  color: #fff;
}

@media (max-width: 991px) {
  /* La barre est déjà serrée : la marge automatique n'a plus d'objet, et
     elle pousserait le burger hors de l'écran. */
  .wr-lang { margin-left: 0; }
}

/* Mention « identité masquée » sur la page publique d'un candidat anonyme. */
.wr-cvp__anon {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 12px; padding: 9px 12px;
  border-radius: 10px;
  background: var(--wr-bg, #F8F9FC);
  border: 1px solid var(--wr-line, #EEF1F7);
  font-size: 12.5px; line-height: 1.5; color: var(--wr-muted, #6B7280);
}
.wr-cvp__anon svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--wr-violet, #8A63C1); }

/* ── Le CV complet sur une page anonyme publique ── */
.wr-cvp__cvlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.wr-cvp__cvlist li { font-size: 14px; color: #3F4451; line-height: 1.55; }
.wr-cvp__cvlist strong { display: block; color: var(--wr-ink, #1E1B2E); font-weight: 700; }
.wr-cvp__cvorg { font-size: 13px; color: var(--wr-violet, #8A63C1); font-weight: 600; }
.wr-cvp__cvdates { font-size: 12.5px; color: var(--wr-muted-2, #9CA3AF); margin-left: 8px; }
.wr-cvp__cvlist p { font-size: 13.5px; margin: 4px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE PLEINE LARGEUR + SOMMAIRE OUVERT

   ⚠️  CE BLOC DÉCRIVAIT UN DÉCALAGE QUI N'EXISTE PLUS.

       Le contenu gagnait 396 px de marge quand le sommaire s'ouvrait. Le
       panneau se pose maintenant après la sidebar (`--wr-toc-left`), et le
       contenu ne bouge plus — voir la note qui suit.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️  LE CONTENU NE SE DÉCALE PLUS QUAND LE SOMMAIRE S'OUVRE.

   Il gagnait 396 px de marge gauche pour laisser la place au panneau. Dans
   l'espace connecté, la sidebar occupe DÉJÀ 314 px : les deux décalages
   s'ajoutaient, l'article se retrouvait plaqué à droite avec un grand vide
   au milieu de l'écran.

   Le panneau se pose maintenant APRÈS la sidebar (voir `.wr-toc`), dans une
   zone qui lui appartient. Le contenu, lui, reste centré dans sa colonne —
   c'est sa place, quel que soit l'état du sommaire. */

/* ⚠️  LE TEXTE VA BORD À BORD — CHOIX ASSUMÉ, PAS UN OUBLI.

   Une mesure de lecture (78 caractères) bridait ici les paragraphes : au-delà
   d'une centaine de caractères par ligne, l'œil rate la ligne suivante au
   retour à la marge. Elle a été retirée à la demande — l'article occupe
   toute la largeur, texte compris.

   Pour la rétablir un jour, c'est ce bloc, rien d'autre :

       .wr-container--wide .wr-prose > p,
       .wr-container--wide .wr-prose > ul,
       .wr-container--wide .wr-prose > ol,
       .wr-container--wide .wr-prose > blockquote { max-width: 78ch; }

   (les titres, images et tableaux gagnaient déjà à rester libres). */

/* ⚠️  SANS CETTE MARGE, LE TITRE VISÉ SE RETROUVE SOUS L'EN-TÊTE.

   Un clic dans le sommaire amène le titre en HAUT de la fenêtre — donc
   derrière l'en-tête du site, qui le recouvre. `scroll-margin-top` réserve
   la place : c'est la propriété faite pour ça, et elle vaut aussi pour
   l'arrivée sur une URL avec ancre. */
.wr-prose h2,
.wr-prose h3,
.wr-prose h4 { scroll-margin-top: 96px; }

/* ══════════════════════════════════════════════════════════════════════════
   /articles — LISTE EN LIGNES + APPEL À L'ACTION INTERCALÉ

   Une ligne par article plutôt qu'une grille de vignettes : sur 870 articles
   réels, 13 ont une illustration. Une grille de cartes n'aurait donné à voir
   que ses trous.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-glist { display: grid; gap: 12px; }

.wr-gline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 16px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wr-gline:hover {
  border-color: #D9C9F2;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30, 27, 46, .06);
}

.wr-gline__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: var(--wr-violet-softer, #F5F1FB);
  color: var(--wr-violet, #8A63C1);
}
.wr-gline__ico svg { width: 22px; height: 22px; }

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

.wr-gline__title {
  display: block;
  font-size: 15px; font-weight: 700; line-height: 1.35;
  color: var(--wr-ink, #1E1B2E);
}

/* ⚠️  UNE SEULE LIGNE, COUPÉE NET.

   Les extraits importés font parfois 300 caractères : laissés libres, ils
   font grandir une ligne sur deux et la liste perd son rythme — on ne
   balaie plus les titres, on lit tout. */
.wr-gline__desc {
  display: block;
  margin-top: 3px;
  font-size: 13px; line-height: 1.5;
  color: var(--wr-muted, #6B7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wr-gline__cta {
  flex: none;
  padding: 7px 13px;
  border-radius: 100px;
  background: var(--wr-violet-softer, #F5F1FB);
  color: var(--wr-violet, #8A63C1);
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
}
.wr-gline:hover .wr-gline__cta { background: #EDE3FB; }

.wr-gline__arrow { width: 18px; height: 18px; flex: none; color: #C3BED1; }
.wr-gline:hover .wr-gline__arrow { color: var(--wr-violet, #8A63C1); }

/* Sur mobile, la pilule prend toute la largeur d'une ligne à elle seule :
   on la masque, la flèche et le titre suffisent à dire qu'on peut cliquer. */
@media (max-width: 720px) {
  .wr-gline { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .wr-gline__cta { display: none; }
  .wr-gline__ico { width: 40px; height: 40px; }
}

/* ── L'appel à l'action intercalé ── */
.wr-gcta {
  margin: 4px 0;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(135deg, #8A63C1, #6D4BA8);
  color: #fff;
}
.wr-gcta__title {
  margin: 0 0 20px;
  font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em;
  color: #fff;
}
.wr-gcta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .wr-gcta { padding: 20px; } .wr-gcta__grid { grid-template-columns: 1fr; } }

.wr-gcta__card { background: #fff; border-radius: 16px; padding: 20px; }
.wr-gcta__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wr-violet, #8A63C1);
}
.wr-gcta__tag svg {
  width: 30px; height: 30px; padding: 6px; flex: none;
  border-radius: 9px; background: var(--wr-violet-softer, #F5F1FB);
}
.wr-gcta__card h3 { margin: 12px 0 6px; font-size: 17px; font-weight: 800; color: var(--wr-ink, #1E1B2E); }
.wr-gcta__card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--wr-muted, #6B7280); }


/* ⚠️  LA CARD « AUTRES ARTICLES » S'ÉTEND SUR TOUTE LA GRILLE.

   `grid-column: 1 / -1` va de la première à la DERNIÈRE ligne de colonne,
   quel que soit leur nombre — la grille est en `auto-fill`, il varie avec la
   largeur de l'écran. Écrire `span 2` marcherait à 1280 px et laisserait un
   trou à 1600 px, où la grille compte trois colonnes.

   Sa liste, elle, passe en colonnes de texte : cent titres empilés sur toute
   la largeur donneraient une colonne unique interminable. `columns` les
   répartit sans qu'on ait à découper quoi que ce soit dans le gabarit. */
.wr-sitemap__card--full { grid-column: 1 / -1; }

.wr-sitemap__card--full .wr-sitemap__list {
  columns: 280px auto;
  column-gap: 28px;
}

/* Un titre coupé entre deux colonnes se lit deux fois, à moitié à chaque
   endroit : on interdit la rupture au milieu d'une ligne. */
.wr-sitemap__card--full .wr-sitemap__list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Le champ de filtre reste sur une largeur de saisie normale : étiré sur
   1200 px, il ne ressemble plus à un champ de recherche. */
.wr-sitemap__card--full .wr-sitemap__search { max-width: 420px; }


/* ══════════════════════════════════════════════════════════════════════════
   OÙ SE POSE LE SOMMAIRE

   Sur une page sans coquille (article public, visiteur), le bord gauche de
   l'écran est libre : 24 px suffisent. Dans l'espace connecté, la sidebar
   tient les 314 premiers pixels — le panneau démarre après elle.

   ⚠️  LA VALEUR SUIT LE REPLI DE LA SIDEBAR TOUTE SEULE.

       `--wr-side-w` passe à 68 px quand on replie la colonne ; le calcul
       ci-dessous en dérive. Écrire « 338px » en dur marcherait aujourd'hui
       et laisserait un trou de 246 px demain, sans que personne ne fasse le
       lien avec le bouton « Réduire ».
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️  LA VALEUR EST POSÉE PAR `wr-toc.js`, SUR `:root`. PAS ICI.

   Une règle `.wr-shell { --wr-toc-left: … }` semblait naturelle — elle est
   inopérante. Le panneau et la bulle sont ajoutés à `<body>`, hors de
   `.wr-shell` : les propriétés personnalisées s'héritent par l'arbre DOM,
   pas par la proximité visuelle. La variable n'arrivait jamais, la bulle
   restait à 24 px du bord, et se posait sur la sidebar.

   Le script mesure la colonne (`getBoundingClientRect`) et écrit la valeur
   sur `:root`. La déclaration ci-dessous n'est plus qu'un repli, pour le
   temps de chargement du script et pour les pages sans sidebar. */
:root { --wr-toc-left: 24px; }

/* ── Filtre géographique (pays / région / ville) ──────────────────────────
   Trois rangées empilées, de la plus large à la plus fine. Les sous-rangées
   sont retirées visuellement pour montrer qu'elles dépendent du choix du
   dessus — sans quoi les trois paraissent indépendantes. */
.wr-geo { margin: 0 0 var(--wr-s-6, 24px); }

.wr-geo__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0;
}
.wr-geo__row--sub {
  padding-left: 14px;
  border-left: 2px solid var(--wr-violet-soft, #F2EDFA);
  margin-left: 4px;
}

.wr-geo__label {
  min-width: 58px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wr-muted, #6B7280);
}

/* Le compteur : discret, mais il évite de cliquer sur une impasse. */
.wr-geo__count {
  margin-left: 5px; padding: 1px 5px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .06);
  font-size: 10.5px; font-weight: 600;
}
.wr-chip--active .wr-geo__count { background: rgba(255, 255, 255, .25); }

.wr-geo__more { font-size: 12px; color: var(--wr-muted, #6B7280); }

.wr-chip--sm { padding: 5px 11px; font-size: 12px; }

@media (max-width: 640px) {
  /* Le libellé passe au-dessus : sur 320px, il mangeait la moitié de la
     largeur disponible pour les chips. */
  .wr-geo__row { align-items: flex-start; }
  .wr-geo__label { width: 100%; min-width: 0; margin-bottom: 2px; }
}

/* ── Pays dans le hero de recherche ───────────────────────────────────────
   Le compteur sur la pastille : discret, mais il évite de cliquer sur un
   pays qui n'a que deux villes. */
.wr-pill__n {
  margin-left: 6px; padding: 1px 6px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .06);
  font-size: 10.5px; font-weight: 600;
}
.wr-pill.is-active .wr-pill__n { background: rgba(255, 255, 255, .25); }

.wr-pill--sm { padding: 5px 11px; font-size: 12px; }

/* La rangée des régions dépend du pays choisi : le filet la rattache
   visuellement au bloc du dessus, sinon les deux paraissent indépendantes. */
.wr-hero-search__pills--sub {
  margin-top: 8px; padding-left: 12px;
  border-left: 2px solid var(--wr-violet-soft, #F2EDFA);
}

/* ── Landing d'un pays : aperçus de villes ────────────────────────────────

   ⚠️  DES CARTES, PLUS UNE LISTE EN COLONNES.

       La liste tenait sur peu de place mais ne disait rien de chaque ville.
       L'aperçu montre l'icône, le nom et le sous-titre quand il existe —
       assez pour choisir sans cliquer.

       La grille reflue seule : trois colonnes en large, une sur mobile,
       sans média-requête. */
.wr-country-block { margin: 0 0 var(--wr-s-10, 40px); }
.wr-country-block__sub {
  margin: 4px 0 var(--wr-s-5, 20px);
  color: var(--wr-muted, #6B7280); font-size: 14px;
}

.wr-city-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.wr-city-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-lg, 14px);
  background: var(--wr-card, #fff);
  text-decoration: none;
  transition: border-color var(--wr-t, .15s), transform var(--wr-t, .15s), box-shadow var(--wr-t, .15s);
}
.wr-city-card:hover {
  transform: translateY(-2px);
  border-color: var(--wr-violet-2, #A98AD3);
  box-shadow: 0 4px 8px rgba(138,99,192,.08), 0 12px 32px rgba(138,99,192,.10);
}

.wr-city-card__ic { font-size: 20px; line-height: 1; flex: none; }

/* `min-width: 0` sur le conteneur de texte : sans lui, un sous-titre long
   pousse la carte au lieu d'être tronqué par `wr-clamp-2`. */
.wr-city-card__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wr-city-card__name { font-size: 14.5px; font-weight: 600; color: var(--wr-ink, #1E1B2E); }
.wr-city-card__sub { font-size: 12.5px; color: var(--wr-muted, #6B7280); }

.wr-city-card__go { width: 16px; height: 16px; flex: none; color: var(--wr-ink-3, #9CA3AF); }
.wr-city-card:hover .wr-city-card__go { color: var(--wr-violet, #8A63C1); }


/* Le compteur de villes dans la liste des pays du plan du site. */
.wr-sitemap__n {
  float: right;
  padding: 0 6px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .05);
  font-size: 11px; font-weight: 600;
  color: var(--wr-muted, #6B7280);
}

/* Le passage à l'autre public, en bas d'une landing pays. */
.wr-country-cross {
  margin: var(--wr-s-8, 32px) 0 0;
  padding-top: var(--wr-s-5, 20px);
  border-top: 1px solid var(--wr-line, #EEF1F7);
  font-size: 14px;
}
.wr-country-cross a { color: var(--wr-violet-dark, #6B47A6); font-weight: 600; text-decoration: none; }
.wr-country-cross a:hover { text-decoration: underline; }

/* Les blocs rédigés d'une landing pays : même respiration que le corps
   d'un article, sans hériter de ses marges de section. */
.wr-country-edito {
  margin: var(--wr-s-6, 24px) 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wr-ink-2, #374151);
}
.wr-country-edito h2 { font-size: 20px; margin: var(--wr-s-6, 24px) 0 8px; }
.wr-country-edito h3 { font-size: 17px; margin: var(--wr-s-5, 20px) 0 6px; }
.wr-country-edito p { margin: 0 0 12px; }
.wr-country-edito ul, .wr-country-edito ol { margin: 0 0 12px; padding-left: 22px; }
.wr-country-edito a { color: var(--wr-violet-dark, #6B47A6); }

/* L'appel à l'action sous chaque bloc de villes. */
.wr-country-block__cta { margin: var(--wr-s-5, 20px) 0 0; font-size: 14px; }
.wr-country-block__cta a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--wr-line-2, #E5E9F0);
  border-radius: var(--wr-r-pill, 100px);
  color: var(--wr-violet-dark, #6B47A6);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--wr-t, .15s), background var(--wr-t, .15s);
}
.wr-country-block__cta a:hover {
  border-color: var(--wr-violet-2, #A98AD3);
  background: var(--wr-violet-soft, #F2EDFA);
}

/* ── Recherche dans une grille de cartes ──────────────────────────────────
   Même anatomie que les autres champs du site : icône, saisie, anneau de
   focus violet. La largeur est bornée — un champ pleine largeur au-dessus
   d'une grille donne un formulaire, pas un filtre. */
.wr-city-search {
  display: flex; align-items: center; gap: 9px;
  max-width: 340px;
  margin: 0 0 var(--wr-s-4, 16px);
  padding: 9px 13px;
  border: 1px solid var(--wr-line-2, #E5E9F0);
  border-radius: var(--wr-r-md, 12px);
  background: #FAFBFD;
  transition: border-color var(--wr-t, .15s), box-shadow var(--wr-t, .15s);
}
.wr-city-search:focus-within {
  border-color: var(--wr-violet, #8A63C1);
  box-shadow: 0 0 0 3px rgba(138, 99, 193, .12);
}
.wr-city-search svg { width: 15px; height: 15px; flex: none; color: var(--wr-muted, #6B7280); }
.wr-city-search input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: 13.5px; color: var(--wr-ink, #1E1B2E);
}

.wr-city-vide {
  margin: var(--wr-s-4, 16px) 0 0;
  font-size: 14px;
  color: var(--wr-muted, #6B7280);
}

/* ⚠️  `hidden` SEUL SERAIT BATTU PAR LE `display` DE LA GRILLE.

   Les cartes sont des éléments de grille : la règle `display` de
   `.wr-city-card` prend le pas sur `[hidden] { display: none }` du
   navigateur. Même piège que les boutons du hero. */
.wr-city-card[hidden] { display: none !important; }

/* ── Offres similaires, en bas de fiche ───────────────────────────────────
   Un fond légèrement distinct sépare la suggestion du contenu de l'offre :
   sans lui, la liste se lirait comme la suite de la fiche. */
/* ⚠️  LES ESPACEMENTS SE CUMULAIENT.

   `.wr-section` pose déjà 80 px de padding vertical. En ajoutant 40 de
   marge et 40 de padding, on obtenait 160 px de blanc avant le titre — et
   le trait de séparation flottait à mi-chemin, sans rien séparer de
   visible.

   On annule le padding du haut hérité, et le trait devient la vraie
   frontière entre l'offre et les suggestions. */
/* ⚠️  NI TRAIT, NI BLANC DE 80 px.

   `.wr-section` pose 80 px de padding vertical ; j'avais redéfini le haut à
   32, mais le BAS de la section précédente s'y ajoutait — d'où l'écart
   énorme visible entre la fin de l'offre et « Offres similaires ».

   Le trait, lui, doublait une séparation que le changement de titre suffit
   à marquer. Deux frontières pour une seule transition. */
/* ⚠️  `.wr-section--proches` A ÉTÉ RETIRÉ.

   Les offres similaires vivaient dans leur propre section, en pleine
   largeur sous la fiche. Elles sont désormais DANS la colonne principale,
   en `wr-fiche__card` — même cadre que sur la fiche d'entreprise, même
   bord gauche que le bloc d'inscription. La section n'existe plus, ses
   règles non plus.

   `wr-proches__h` reste : d'autres écrans l'emploient. */
.wr-proches__h { font-size: 22px; margin: 0 0 4px; }

/* ⚠️  SUR UNE OFFRE EXPIRÉE, LES SUGGESTIONS DEVIENNENT LE CONTENU.

   L'offre qu'on venait voir n'existe plus : cette card est la seule chose
   utile de la page. Un fond léger et une bordure violette la sortent du
   rôle de « suggestion en bas de colonne » sans crier. */
.wr-fiche__card--urgent {
  background: var(--wr-violet-softer, #F8F4FD);
  border-color: var(--wr-violet-2, #A98AD3);
}
.wr-proches__sub { margin: 0; color: var(--wr-muted, #6B7280); font-size: 14px; }

/* Le même blanc au-dessus de la liste et du « Tout voir ». Ces deux
   écarts vivaient en `style=""` dans la vue — invisibles depuis cette
   feuille, donc jamais accordés avec le reste quand on retouche la
   section. Ici, ils bougent ensemble. */
.wr-proches__list { margin-top: var(--wr-s-4, 16px); }
.wr-proches__more { margin: var(--wr-s-4, 16px) 0 0; }

/* La variante « offre expirée » est passée en modificateur de card —
   voir `.wr-fiche__card--urgent` plus haut. L'ancienne règle visait une
   section qui n'existe plus. */

/* ══════════════════════════════════════════════════════════════════════
   CTA D'INSCRIPTION INSÉRÉ DANS UNE LISTE (wr-appcta)

   Le bloc violet qui coupe la liste des offres ou de l'annuaire après
   quelques résultats. Il se pose ENTRE deux `.wr-list` — jamais dedans :
   `.wr-list` est une card à filets, et un pavé plein à l'intérieur
   laisserait des bordures de part et d'autre.

   Le dégradé est celui de `wr-cta-dual` : c'est le même geste sur le
   site, il doit se reconnaître d'une page à l'autre.
   ══════════════════════════════════════════════════════════════════════ */
.wr-appcta {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 14px 0;
  padding: 26px;
  border-radius: var(--wr-r-2xl, 20px);
  background: linear-gradient(135deg, var(--wr-violet, #8A63C1), var(--wr-violet-dark, #6B47A6));
  color: #fff;
}

/* Une pastille translucide plutôt qu'une couleur en dur : elle suit le
   dégradé au lieu de s'y poser comme une pièce rapportée. */
.wr-appcta__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--wr-r-md, 12px);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.wr-appcta__body { flex: 1; min-width: 0; }

.wr-appcta__title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

/* Le texte secondaire est du blanc atténué, pas un gris : sur un fond
   violet, `--wr-muted` devient illisible. */
.wr-appcta__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}

.wr-appcta__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.wr-appcta__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .94);
}

.wr-appcta__list svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }

.wr-appcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wr-appcta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--wr-r-pill, 100px);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--wr-t, .15s), border-color var(--wr-t, .15s);
}

.wr-appcta__btn--solid { background: #fff; color: var(--wr-violet-dark, #6B47A6); }
.wr-appcta__btn--solid:hover { background: var(--wr-violet-soft, #F2EDFA); }

.wr-appcta__btn--ghost {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.wr-appcta__btn--ghost:hover { background: rgba(255, 255, 255, .24); }

.wr-appcta__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.wr-appcta__store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--wr-r-sm, 10px);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.wr-appcta__store:hover { background: rgba(0, 0, 0, .32); }

@media (max-width: 640px) {
  .wr-appcta { padding: 20px; gap: 13px; }
  .wr-appcta__icon { width: 36px; height: 36px; }
  .wr-appcta__title { font-size: 17px; }
  .wr-appcta__btn { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   CTA D'INSCRIPTION SUR UNE RECHERCHE VIDE (wr-emptycta)

   Il vient JUSTE APRÈS le bloc « aucun résultat », qui est lui-même
   centré et discret. Deux blocs pleins à la suite feraient une page de
   promotion là où le visiteur cherchait de l'information : celui-ci reste
   clair, bordé de violet, sans dégradé.

   ⚠️  IL NE DOIT PAS ÉCRASER LE MESSAGE D'ÉTAT.

   `wr-empty` explique ce qui s'est passé — c'est l'information. Ce bloc
   propose une suite. Si le second criait plus fort que le premier, on
   lirait une publicité avant de comprendre pourquoi la page est vide.
   ══════════════════════════════════════════════════════════════════════ */
.wr-emptycta {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 28px 24px;
  text-align: center;
  background: var(--wr-violet-softer, #F8F4FD);
  border: 1px solid var(--wr-violet-2, #A98AD3);
  border-radius: var(--wr-r-xl, 18px);
}

/* ⚠️  PAS DE TOKEN `line` SUR UNE ICÔNE : `--wr-line` est une couleur de
   trait, elle rendrait le pictogramme invisible sur fond clair. */
.wr-emptycta__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: var(--wr-r-md, 12px);
  background: var(--wr-violet, #8A63C1);
  color: #fff;
}
.wr-emptycta__icon svg { width: 21px; height: 21px; }

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

.wr-emptycta__text {
  margin: 0 auto 18px;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--wr-ink-2, #374151);
}

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

/* Sur mobile, deux boutons côte à côte deviennent illisibles : ils
   passent l'un sous l'autre, pleine largeur. */
@media (max-width: 520px) {
  .wr-emptycta { padding: 22px 18px; }
  .wr-emptycta__actions .wr-btn { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   « CHARGER PLUS » DE L'ACCUEIL (wr-more)

   Dans la card, sous les rangées, séparé par un filet : posé dehors, il
   flotterait sous le cadre sans qu'on sache ce qu'il charge — et le
   bandeau de chiffres qui suit la liste prendrait sa place visuelle.
   ══════════════════════════════════════════════════════════════════════ */
.wr-more {
  padding: 16px;
  text-align: center;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}

/* Le bouton occupe une bonne part de la largeur : c'est le seul geste
   proposé sous la liste, il n'a pas à se faire discret. Borné quand même,
   pour ne pas devenir une bannière sur grand écran. */
.wr-more__btn {
  min-width: 240px;
  max-width: 100%;
}

/* ⚠️  PENDANT LE CHARGEMENT, LE BOUTON RESTE À SA TAILLE.

   Le libellé passe de « Charger plus d'offres » à « … » : sans largeur
   minimale, le bouton se réduirait d'un coup et la page sauterait sous le
   curseur, juste après le clic. */
.wr-more__btn[disabled] {
  opacity: .6;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════
   LE CHAMP DE RECHERCHE RESTE VISIBLE AU DÉFILEMENT

   Sur /jobs et /companies, on parcourt des dizaines de lignes. Corriger sa
   recherche demandait de remonter tout en haut — et l'on remontait souvent,
   parce que c'est justement en lisant les résultats qu'on sait quoi
   changer.

   ⚠️  `top` REPREND `--wr-shell-top`, PAS UNE VALEUR ÉCRITE À LA MAIN.

   C'est la variable dont la sidebar se sert déjà (wr-shell.css) : hauteur
   du header plus une respiration. Réécrire « 92px » ici marcherait
   aujourd'hui et se décalerait le jour où le header change de hauteur —
   la barre passerait sous lui ou flotterait au-dessus, et personne ne
   ferait le lien avec la modification du header.

   ⚠️  ET IL LUI FAUT UN FOND OPAQUE.

   Sans fond, les lignes de la liste défileraient VISIBLEMENT derrière le
   champ. Le fond de page (`--wr-bg`) et non blanc : la barre doit se
   fondre dans la page, pas s'y poser comme une card.
   ══════════════════════════════════════════════════════════════════════ */
.wr-hero-search__form--sticky {
  position: sticky;
  top: var(--wr-shell-top, 92px);

  /* Sous le header (z-index 100) et sous les menus déroulants, au-dessus
     des rangées. Une barre qui passe par-dessus le header au défilement
     est le défaut classique de ce motif. */
  z-index: 20;

  background: var(--wr-bg, #FBFCFE);

  /* Le padding remplace la marge : une marge laisserait une bande
     transparente au-dessus du champ une fois collé, par laquelle on
     verrait passer le contenu. */
  margin-bottom: 0;
  padding: 10px 0 18px;
}

/* ⚠️  PAS DE STICKY SUR MOBILE.

   L'écran fait 640 px de haut, le clavier virtuel en mange la moitié : une
   barre figée de 56 px y devient un bandeau permanent au-dessus d'une
   liste réduite à trois lignes. Sur mobile, on remonte — c'est un geste
   d'un doigt. */
@media (max-width: 991px) {
  .wr-hero-search__form--sticky {
    position: static;
    padding: 0;
    margin-bottom: 18px;
  }
}

/* ⚠️  LE CONTENEUR DE LA RECHERCHE SUR LES LANDINGS.

   `position: sticky` ne colle que dans la boîte de son parent. Sur les
   landings, la recherche a donc son propre conteneur — qui doit s'étendre
   sur toute la page pour que le champ suive le défilement.

   `contain: none` et pas de `overflow` : les deux annuleraient le sticky
   sans rien signaler. C'est écrit ici pour que personne n'ajoute
   `overflow: hidden` un jour « pour régler un débordement ». */
.wr-sticky-wrap {
  position: static;
  overflow: visible;
}