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

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

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

.wr-pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  margin-inline: auto;
}

.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;
}

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

/* ══════════════════════════════════════════════════════════════════
   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 ─────────────────────────────────────── */

.wr-posts {
  display: grid;
  grid-template-columns: repeat(3, 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 ──────────────────────────────────────────────────────── */

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

.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 { grid-template-columns: repeat(2, 1fr); }
  .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 { grid-template-columns: 1fr; }
  .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; }
.wr-match--locked strong { display: block; font-size: 14.5px; color: var(--wr-ink); }
.wr-match--locked p { margin: 2px 0 0; font-size: 13px; color: var(--wr-muted); }

@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)
   ══════════════════════════════════════════════════════════════════════ */
.wr-hero-search { margin-bottom: 26px; }

.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); }

.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;
  min-width: 220px;
}
.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; }

.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; }

.wr-hero-search__more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px;
  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;
}
.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; }
.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; }

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

/* ══════════════════════════════════════════════════════════════════════
   SONDAGE DE SATISFACTION — formulaire public
   ══════════════════════════════════════════════════════════════════════ */
.wr-survey-card {
  max-width: 620px; margin: 20px auto;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 20px;
  padding: 36px 34px; box-shadow: 0 12px 40px rgba(30, 27, 46, .07);
}
.wr-survey-card--center { text-align: center; }
.wr-survey-ico {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 18px;
  background: var(--wr-violet-softer, #F3EEFB); color: var(--wr-violet, #8A63C1);
}
.wr-survey-ico--done { background: #DCFCE7; color: #16A34A; }
.wr-survey-ico--muted { background: #F1F3F7; color: #9CA3AF; }
.wr-survey-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--wr-ink, #1E1B2E); }
.wr-survey-text { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--wr-muted, #6B7280); }

.wr-survey-form { text-align: left; }
.wr-survey-q { margin-bottom: 26px; }
.wr-survey-q__label { display: block; font-size: 15.5px; font-weight: 700; color: var(--wr-ink, #1E1B2E); margin-bottom: 4px; }
.wr-survey-q__req { color: #EF4444; margin-left: 3px; }
.wr-survey-q__help { font-size: 13px; color: var(--wr-muted, #6B7280); margin-bottom: 10px; }

/* Étoiles (rating). */
.wr-survey-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.wr-survey-star { cursor: pointer; }
.wr-survey-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.wr-survey-star svg { width: 38px; height: 38px; color: #E5E7EB; transition: color .12s ease; }
/* Survol et sélection : on colore l'étoile et toutes les suivantes (row-reverse). */
.wr-survey-star:hover svg,
.wr-survey-star:hover ~ .wr-survey-star svg,
.wr-survey-star input:checked ~ svg { color: #F59E0B; fill: #F59E0B; }
.wr-survey-star:has(input:checked) svg,
.wr-survey-star:has(input:checked) ~ .wr-survey-star svg { color: #F59E0B; fill: #F59E0B; }

/* NPS 0-10. */
.wr-survey-nps { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-survey-nps__btn { cursor: pointer; }
.wr-survey-nps__btn input { position: absolute; opacity: 0; }
.wr-survey-nps__btn span {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--wr-line, #EEF1F7); font-weight: 700; font-size: 14px; color: #4B5563;
  transition: all .12s ease;
}
.wr-survey-nps__btn:has(input:checked) span { background: var(--wr-violet, #8A63C1); color: #fff; border-color: var(--wr-violet, #8A63C1); }

/* Choix. */
.wr-survey-choices { display: flex; flex-direction: column; gap: 8px; }
.wr-survey-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 11px;
  cursor: pointer; font-size: 14.5px; color: #374151;
}
.wr-survey-choice input { accent-color: var(--wr-violet, #8A63C1); }
.wr-survey-choice:has(input:checked) { border-color: var(--wr-violet, #8A63C1); background: #F8F4FD; }

.wr-survey-submit { width: 100%; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   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;
  align-items: start;
}
@media (max-width: 900px) { .wr-cvp { grid-template-columns: 1fr; } }

/* ── En-tête ── */
.wr-cvp__head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.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; }
.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; }
.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 ── */
.wr-cvp__section { padding: 22px 0; border-top: 1px solid var(--wr-line, #EEF1F7); }
.wr-cvp__section:first-of-type { border-top: 0; }
.wr-cvp__section h2 { font-size: 16px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 12px; }
.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; }

.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 ── */
.wr-cvp__aside { position: sticky; top: 88px; display: grid; gap: 16px; }
@media (max-width: 900px) { .wr-cvp__aside { position: static; } }

.wr-cvp__card {
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px; padding: 22px;
  box-shadow: 0 6px 22px rgba(30, 27, 46, .05);
}
.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; }

.wr-fdrawer__body { flex: 1; overflow-y: auto; padding: 22px; display: grid; gap: 26px; }

.wr-fgroup__label {
  display: block; margin-bottom: 12px;
  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;
}

.wr-sitemap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.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); }

.wr-article__cover-wrap { margin-bottom: 24px; border-radius: 18px; overflow: hidden; }
.wr-article__cover { width: 100%; height: auto; display: block; }

.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: 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;
}

.wr-toc {
  position: fixed; 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 {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; padding: 9px 18px; border-radius: 100px;
  background: var(--wr-violet-softer, #F5F1FB); border: 1px solid var(--wr-line, #EEF1F7);
  color: var(--wr-violet-dark, #6B47A6); font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.wr-sitemap__more:hover { background: var(--wr-violet-soft, #EDE6F9); border-color: #D9CEF0; }

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