/* ══════════════════════════════════════════════════════════════════════
   Whileresume — Espaces applicatifs

   Candidat et recruteur. Même charte que la vitrine, mais plus dense :
   ce sont des outils de travail, pas des pages de séduction.

   La sidebar n'est pas une colonne unique : ce sont TROIS cards blanches
   distinctes (activité, communauté, compte). Ça sépare visuellement ce
   qu'on fait de ce qu'on consulte et de ce qu'on règle.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */


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


/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — trois cards

   ⚠️  LE LAYOUT (colonne, drawer mobile, voile, bouton flottant) EST
   DANS public/css/wr-shell.css.

   Il etait ici, mais les regles du drawer (`position: fixed`, sous
   991px) etaient ANNULEES par un `.wr-side { position: sticky }` et un
   `.wr-side { display: none }` declares 2 000 lignes plus bas — media
   query ou pas, une media query n'ajoute aucune specificite. Le bouton
   flottant ouvrait donc un panneau que le CSS gardait masque.

   Ce qui suit est l'apparence des trois cards.
   ══════════════════════════════════════════════════════════════════ */

.wr-side__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  padding: 8px;
  box-shadow: var(--wr-shadow);
}

/* La carte de l'accueil : un seul lien, sans étiquette de section. Même
   cadre que les autres pour que la colonne garde son rythme, mais on retire
   la marge basse — elle précède immédiatement « Connecté ». */
.wr-side__card--plain { margin-bottom: 10px; }

.wr-side__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted-2);
  padding: 8px 12px 6px;
}

.wr-side__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--wr-r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--wr-ink-2);
  transition: background var(--wr-t), color var(--wr-t);
}
.wr-side__link:hover {
  background: var(--wr-violet-softer);
  color: var(--wr-violet);
}

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

.wr-side__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--wr-muted-2);
}
.wr-side__link:hover svg,
.wr-side__link.is-active svg { color: var(--wr-violet); }

/* La pastille de statut (CV publié, non-lus). Un rond vert vaut mieux
   qu'un mot : il se voit du coin de l'œil. */
.wr-side__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
}
.wr-side__dot--success { background: var(--wr-success); }
.wr-side__dot--warning { background: var(--wr-warning); }

.wr-side__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-violet);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Un total, pas une alerte : gris, sans fond violet — la pastille violette
   (.wr-side__badge) reste réservée à ce qui est nouveau. */
.wr-side__count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-bg-2);
  color: var(--wr-muted);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.wr-side__link.is-active .wr-side__count { background: #fff; color: var(--wr-violet); }

.wr-side__link--danger { color: var(--wr-danger); }
.wr-side__link--danger:hover { background: #FEF2F2; color: #B91C1C; }
.wr-side__link--danger svg { color: var(--wr-danger); }

/* ── L'alerte de la sidebar ──────────────────────────────────────
   « Votre CV n'est pas publié ». C'est l'information la plus importante
   de l'espace candidat : sans publication, il n'existe pas pour les
   recruteurs. On ne la cache pas au fond d'une page de réglages. */
.wr-side__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--wr-r-lg);
  transition: all var(--wr-t);
}

.wr-side__alert--warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}
.wr-side__alert--pending {
  background: var(--wr-violet-soft);
  border: 1px solid var(--wr-violet-2);
  color: var(--wr-violet-dark);
}
.wr-side__alert:hover { transform: translateY(-1px); }

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

.wr-side__alert strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 2px;
}

.wr-side__alert-text {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  opacity: .85;
}

/* ── Complétude ── */
.wr-side__progress {
  padding: 14px 12px;
}

.wr-side__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wr-side__progress-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--wr-violet);
  letter-spacing: -.02em;
}

.wr-bar {
  height: 5px;
  background: var(--wr-line-2);
  border-radius: var(--wr-r-pill);
  overflow: hidden;
}

.wr-bar__fill {
  height: 100%;
  background: var(--wr-violet);
  border-radius: var(--wr-r-pill);
  transition: width .5s var(--wr-t-slow);
}
.wr-bar__fill.is-low { background: var(--wr-warning); }

/* ══════════════════════════════════════════════════════════════════
   EN-TÊTE DE PAGE
   ══════════════════════════════════════════════════════════════════ */

.wr-app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.wr-app-head h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--wr-ink);
  margin-bottom: 6px;
}

.wr-app-head p {
  font-size: 14px;
  color: var(--wr-muted);
  max-width: 60ch;
}

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

/* ══════════════════════════════════════════════════════════════════
   PANNEAU
   Le conteneur générique des espaces. Comme une card, mais avec une
   tête et un pied.
   ══════════════════════════════════════════════════════════════════ */

.wr-panel {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  box-shadow: var(--wr-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

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

.wr-panel__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--wr-ink);
}

.wr-panel__body { padding: 20px; }
.wr-panel__body--flush { padding: 0; }

.wr-panel__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--wr-line);
  background: var(--wr-bg-2);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   STATISTIQUES
   ══════════════════════════════════════════════════════════════════ */

.wr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 991px) { .wr-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wr-stats { grid-template-columns: 1fr; } }

.wr-stat {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-lg);
  padding: 18px;
  box-shadow: var(--wr-shadow);
  transition: all var(--wr-t);
  display: block;
}
a.wr-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--wr-shadow-hover);
  border-color: var(--wr-violet-2);
}

.wr-stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wr-muted-2);
  margin-bottom: 10px;
}
.wr-stat__label svg { width: 13px; height: 13px; }

.wr-stat__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--wr-ink);
  line-height: 1;
}
.wr-stat__value--violet  { color: var(--wr-violet); }
.wr-stat__value--success { color: var(--wr-success); }
.wr-stat__value--warning { color: var(--wr-warning); }

/* Une valeur textuelle (« Publié », « Non publié ») : plus petite, en
   graisse normale. Un mot en 28px, c'est illisible. */
.wr-stat__value--text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.wr-stat__hint {
  font-size: 11.5px;
  color: var(--wr-muted);
  margin-top: 8px;
}
.wr-stat__hint a { color: var(--wr-violet); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   ONBOARDING

   Les étapes qui restent. On les montre tant qu'elles ne sont pas
   toutes faites — et on les fait disparaître dès que c'est bon. Un
   onboarding qui reste après coup, c'est du bruit.
   ══════════════════════════════════════════════════════════════════ */

.wr-onboard {
  background: var(--wr-card);
  border: 1px solid var(--wr-violet-2);
  border-radius: var(--wr-r-xl);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 0 0 3px rgba(138, 99, 192, .06);
}

.wr-onboard__head { margin-bottom: 16px; }

.wr-onboard__steps { display: grid; gap: 8px; }

.wr-onboard__step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--wr-r-md);
  border: 1px solid var(--wr-line);
  transition: all var(--wr-t);
}
.wr-onboard__step:hover {
  border-color: var(--wr-violet-2);
  background: var(--wr-violet-softer);
}

.wr-onboard__step.is-done {
  border-color: transparent;
  background: #F0FDF4;
  opacity: .75;
}
.wr-onboard__step.is-current {
  border-color: var(--wr-violet);
  background: var(--wr-violet-softer);
}

.wr-onboard__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wr-line);
  color: var(--wr-muted);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.wr-onboard__step.is-done .wr-onboard__num {
  background: var(--wr-success);
  color: #fff;
}
.wr-onboard__step.is-done .wr-onboard__num svg { width: 13px; height: 13px; }
.wr-onboard__step.is-current .wr-onboard__num {
  background: var(--wr-violet);
  color: #fff;
}

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

.wr-onboard__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wr-ink);
}

.wr-onboard__text {
  display: block;
  font-size: 12px;
  color: var(--wr-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   ONGLETS
   ══════════════════════════════════════════════════════════════════ */

.wr-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--wr-bg-2);
  border-radius: var(--wr-r-md);
  margin-bottom: 20px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.wr-tab {
  padding: 8px 16px;
  border-radius: var(--wr-r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--wr-muted);
  white-space: nowrap;
  transition: all var(--wr-t);
}
.wr-tab:hover { color: var(--wr-ink); }
.wr-tab.is-active {
  background: var(--wr-card);
  color: var(--wr-violet);
  box-shadow: var(--wr-shadow);
}

/* ══════════════════════════════════════════════════════════════════
   ALERTES
   ══════════════════════════════════════════════════════════════════ */

.wr-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--wr-r-md);
  font-size: 13.5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.wr-alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.wr-alert strong { font-weight: 700; }

.wr-alert--success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.wr-alert--warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.wr-alert--danger  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.wr-alert--info    { background: var(--wr-violet-softer); border-color: var(--wr-violet-2); color: var(--wr-violet-dark); }

/* ══════════════════════════════════════════════════════════════════
   CV — les deux voies
   ══════════════════════════════════════════════════════════════════ */

.wr-cv-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

.wr-cv-option {
  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-cv-option:hover {
  transform: translateY(-3px);
  box-shadow: var(--wr-shadow-hover);
  border-color: var(--wr-violet-2);
}

.wr-cv-option__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.wr-cv-option__icon svg { width: 24px; height: 24px; }

/* Deux teintes : importer et générer sont deux voies différentes, pas
   une principale et un pis-aller. */
.wr-cv-option:nth-child(1) .wr-cv-option__icon {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-cv-option:nth-child(2) .wr-cv-option__icon {
  background: var(--wr-acc-orange);
  color: var(--wr-acc-orange-fg);
}

.wr-cv-option h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.wr-cv-option > p {
  font-size: 13.5px;
  color: var(--wr-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.wr-cv-option__form { margin-top: auto; }

.wr-cv-option__perk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--wr-line);
  font-size: 12px;
  color: var(--wr-muted);
}
.wr-cv-option__perk svg {
  width: 14px;
  height: 14px;
  color: var(--wr-violet);
  flex-shrink: 0;
}

/* ── Aperçu du PDF ── */

.wr-cv-preview {
  aspect-ratio: 1 / 1.35;
  max-height: 620px;
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-lg);
  overflow: hidden;
  background: var(--wr-bg-2);
}
.wr-cv-preview object { width: 100%; height: 100%; border: 0; }

.wr-cv-preview__fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  text-align: center;
  color: var(--wr-muted);
}
.wr-cv-preview__fallback svg {
  width: 44px;
  height: 44px;
  color: var(--wr-muted-2);
}

/* ══════════════════════════════════════════════════════════════════
   ANALYSE EN COURS
   ══════════════════════════════════════════════════════════════════ */

.wr-analysing {
  min-height: 55vh;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.wr-analysing__card {
  max-width: 460px;
  text-align: center;
  padding: 40px 32px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-3xl);
  box-shadow: var(--wr-shadow-hover);
}

.wr-analysing__anim {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 24px;
  color: var(--wr-violet);
}
.wr-analysing__anim > svg {
  width: 100%;
  height: 100%;
  animation: wrFloat2 2.4s ease-in-out infinite;
}

/* L'étincelle tourne autour du document : elle dit « ça travaille » sans
   prétendre connaître la progression. */
.wr-analysing__sparkle {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  color: var(--wr-acc-orange-fg);
  animation: wrSparkle 1.6s ease-in-out infinite;
}
.wr-analysing__sparkle svg { width: 100%; height: 100%; }

@keyframes wrFloat2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes wrSparkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: .7; }
  50%      { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

.wr-analysing__card h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.wr-analysing__card > p {
  font-size: 14px;
  color: var(--wr-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Barre indéterminée : on ne connaît pas la progression réelle. Inventer
   un pourcentage serait mentir. */
.wr-analysing__bar {
  height: 5px;
  background: var(--wr-line-2);
  border-radius: var(--wr-r-pill);
  overflow: hidden;
}

.wr-analysing__bar-fill {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, var(--wr-violet), var(--wr-violet-2));
  border-radius: var(--wr-r-pill);
  animation: wrSlide 1.6s ease-in-out infinite;
}

@keyframes wrSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ══════════════════════════════════════════════════════════════════
   GÉNÉRATEUR — lignes répétables
   ══════════════════════════════════════════════════════════════════ */

.wr-row-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--wr-line);
}
.wr-row-item:last-child { border-bottom: 0; }
.wr-row-item:hover { background: var(--wr-bg-2); }

.wr-row-item__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 26px;
}

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

.wr-row-item__remove {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border-radius: var(--wr-r-xs);
  color: var(--wr-muted-2);
  display: grid;
  place-items: center;
  transition: all var(--wr-t);
  opacity: 0;
}
.wr-row-item:hover .wr-row-item__remove { opacity: 1; }
.wr-row-item__remove:hover { background: #FEF2F2; color: var(--wr-danger); }
.wr-row-item__remove svg { width: 14px; height: 14px; }

/* Sans JS, ce bouton n'a rien à supprimer : les lignes vides sont
   ignorées côté serveur de toute façon. */
.no-js .wr-row-item__remove { display: none; }

.wr-lang-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.wr-lang-row .wr-input { flex: 1; }
.wr-lang-row .wr-select { width: 170px; flex-shrink: 0; }
.wr-lang-row .wr-row-item__remove { position: static; opacity: 1; flex-shrink: 0; }

/* ── Thèmes de CV ── */

.wr-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

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

.wr-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--wr-line);
  border-radius: var(--wr-r-lg);
  cursor: pointer;
  transition: all var(--wr-t);
  background: var(--wr-card);
}
.wr-theme:hover { border-color: var(--wr-violet-2); }
.wr-theme.is-selected {
  border-color: var(--wr-violet);
  background: var(--wr-violet-softer);
}

/* Un aperçu schématique : quelques barres qui suggèrent la mise en page.
   Prétendre montrer le rendu exact serait un mensonge — le PDF est
   généré côté serveur. */
.wr-theme__preview {
  width: 100%;
  aspect-ratio: 1 / 1.35;
  border-radius: var(--wr-r-xs);
  background: #fff;
  border: 1px solid var(--wr-line);
  position: relative;
  overflow: hidden;
}
.wr-theme__preview::before {
  content: '';
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 12px;
  background: var(--wr-violet);
  border-radius: 2px;
}
.wr-theme__preview::after {
  content: '';
  position: absolute;
  inset: 26px 8px 8px 8px;
  background: repeating-linear-gradient(var(--wr-line) 0 3px, transparent 3px 8px);
}

.wr-theme__preview--modern::before {
  inset: 8px auto 8px 8px;
  width: 32%;
  height: auto;
}
.wr-theme__preview--modern::after { inset: 8px 8px 8px 44%; }

.wr-theme__preview--minimal::before {
  background: var(--wr-ink);
  height: 3px;
  inset: 12px 8px auto 8px;
}

.wr-theme__preview--creative::before {
  background: linear-gradient(135deg, var(--wr-violet), var(--wr-violet-2));
  height: 36px;
  inset: 0 0 auto 0;
  border-radius: 0;
}
.wr-theme__preview--creative::after { inset: 44px 8px 8px 8px; }

.wr-theme__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--wr-ink-2);
}
.wr-theme.is-selected .wr-theme__name { color: var(--wr-violet); }

/* ══════════════════════════════════════════════════════════════════
   LIKE
   ══════════════════════════════════════════════════════════════════ */

.wr-like {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--wr-line-2);
  background: var(--wr-card);
  color: var(--wr-muted-2);
  display: grid;
  place-items: center;
  transition: all var(--wr-t);
  cursor: pointer;
  flex-shrink: 0;
}
.wr-like:hover {
  border-color: var(--wr-danger);
  color: var(--wr-danger);
  transform: scale(1.08);
}
.wr-like.is-liked {
  border-color: var(--wr-danger);
  color: var(--wr-danger);
  background: #FEF2F2;
}
.wr-like svg { width: 15px; height: 15px; }

/* Un petit rebond au clic : le retour est immédiat, l'utilisateur n'a
   pas à deviner si son geste a été pris en compte. */
.wr-like.is-liked svg { animation: wrHeartPop 300ms ease-out; }

@keyframes wrHeartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Le cœur dans une rangée : positionné à droite, avant la flèche. */
.wr-row__like {
  flex-shrink: 0;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════
   STAT CARDS PASTEL  (dashboard recruteur)

   Quatre teintes différentes. Ça n'a l'air de rien, mais c'est ce qui
   permet de retrouver « les favoris » du coin de l'œil sans lire le
   label — la couleur devient un repère.
   ══════════════════════════════════════════════════════════════════ */

.wr-stat--pastel {
  border: 0;
  box-shadow: none;
}

.wr-stat--pastel .wr-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--wr-r-md);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.wr-stat--pastel .wr-stat__icon svg { width: 18px; height: 18px; }

.wr-stat--blue   { background: #E5F6FF; }
.wr-stat--blue   .wr-stat__icon { background: rgba(30, 116, 254, .12); color: #1E74FE; }
.wr-stat--blue   .wr-stat__value { color: #1E74FE; }

.wr-stat--lilac  { background: #F6F3FF; }
.wr-stat--lilac  .wr-stat__icon { background: rgba(138, 99, 193, .12); color: var(--wr-violet); }
.wr-stat--lilac  .wr-stat__value { color: var(--wr-violet); }

.wr-stat--green  { background: #E2F6E9; }
.wr-stat--green  .wr-stat__icon { background: rgba(16, 185, 129, .14); color: #047857; }
.wr-stat--green  .wr-stat__value { color: #047857; }

.wr-stat--peach  { background: #FFF0E9; }
.wr-stat--peach  .wr-stat__icon { background: rgba(194, 65, 12, .1); color: #C2410C; }
.wr-stat--peach  .wr-stat__value { color: #C2410C; }

.wr-stat--pastel .wr-stat__label {
  color: rgba(30, 27, 46, .5);
  margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   PARTAGE D'URL

   Le recruteur veut partager sa page entreprise. Un champ readonly et un
   bouton « Copier » — pas un lien qu'il faut sélectionner à la souris.
   ══════════════════════════════════════════════════════════════════ */

.wr-share-url {
  background: linear-gradient(135deg, var(--wr-violet-softer), var(--wr-card));
  border: 1px solid var(--wr-violet-2);
  border-radius: var(--wr-r-xl);
  padding: 20px;
  margin-bottom: 24px;
}

.wr-share-url__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.wr-share-url__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--wr-r-sm);
  background: var(--wr-violet);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wr-share-url__icon svg { width: 16px; height: 16px; }

.wr-share-url__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.wr-share-url__input {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--wr-mono);
  color: var(--wr-ink-2);
  background: var(--wr-card);
  border: 1px solid var(--wr-line-2);
  border-radius: var(--wr-r-sm);
  min-width: 0;
  outline: none;
}
.wr-share-url__input:focus { border-color: var(--wr-violet); }

/* Le bouton devient vert et affiche une coche pendant 2 secondes. Sans
   ce retour, on ne sait pas si le clic a marché — et on reclique. */
.wr-share-url__btn.is-copied {
  background: var(--wr-success);
  border-color: var(--wr-success);
}

@media (max-width: 540px) {
  .wr-share-url__row { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════
   ACTIVITÉ RÉCENTE
   ══════════════════════════════════════════════════════════════════ */

.wr-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--wr-line);
  transition: background var(--wr-t);
}
.wr-activity:last-child { border-bottom: 0; }
.wr-activity:hover { background: var(--wr-violet-softer); }

.wr-activity__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wr-activity__icon svg { width: 15px; height: 15px; }

.wr-activity__icon--like    { background: #FEE2E2; color: #B91C1C; }
.wr-activity__icon--message { background: #DBEAFE; color: #1E40AF; }
.wr-activity__icon--job     { background: var(--wr-violet-soft); color: var(--wr-violet); }
.wr-activity__icon--warning { background: #FEF3C7; color: #B45309; }

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

.wr-activity__text {
  font-size: 13.5px;
  color: var(--wr-ink-2);
  line-height: 1.4;
}
.wr-activity__text strong { color: var(--wr-ink); font-weight: 600; }

.wr-activity__time {
  font-size: 11.5px;
  color: var(--wr-muted-2);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   BLOC DE PUBLICATION

   Le prix est affiché À CÔTÉ du bouton, jamais caché derrière.
   Découvrir un paiement après avoir cliqué, c'est déloyal.
   ══════════════════════════════════════════════════════════════════ */

.wr-publish {
  border: 2px solid var(--wr-violet);
  border-radius: var(--wr-r-xl);
  background: linear-gradient(135deg, var(--wr-violet-softer), var(--wr-card));
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 0 0 4px rgba(138, 99, 192, .06);
}

.wr-publish__main {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  flex-wrap: wrap;
}

.wr-publish__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--wr-violet);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wr-publish__icon svg { width: 22px; height: 22px; }

.wr-publish__price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  line-height: 1;
}

.wr-publish__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--wr-violet-2);
  background: rgba(255, 255, 255, .6);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .wr-publish__main { flex-direction: column; align-items: stretch; }
  .wr-publish__main > div:last-child { justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════════════
   RÉCAPITULATIF DE PAIEMENT
   ══════════════════════════════════════════════════════════════════ */

/* Une saisie qu'on relit caractère par caractère — une adresse web, une
   référence. La chasse fixe distingue le 0 du O et le 1 du l, ce qu'une
   police proportionnelle ne fait pas. */
.wr-input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CASE À COCHER D'UN CONSENTEMENT

   ⚠️  ELLE ÉTAIT UTILISÉE SANS EXISTER.

       `wr-check` habille les cases de consentement du CV public et du
       portfolio ; aucune règle ne la définissait, les deux écrans tenaient
       sur des styles en ligne. Une classe sans règle ne casse rien et ne
       fait rien — c'est précisément ce qui la rend difficile à voir.

   La zone cliquable couvre le texte entier : viser une case de 13 px au
   doigt est un exercice, et c'est la dernière chose qu'on veut imposer au
   moment d'accepter une publication.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wr-ink-2, #374151);
  cursor: pointer;
}

.wr-check input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--wr-violet, #8A63C1);
  cursor: pointer;
}

.wr-check:hover { color: var(--wr-ink, #1E1B2E); }

.wr-checkout {
  max-width: 520px;
  margin-inline: auto;
}

.wr-checkout__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wr-line);
  font-size: 14px;
}
.wr-checkout__row:last-of-type { border-bottom: 0; }

.wr-checkout__label { color: var(--wr-muted); }
.wr-checkout__value { font-weight: 600; color: var(--wr-ink); text-align: right; }

.wr-checkout__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 0;
  margin-top: 8px;
  border-top: 2px solid var(--wr-ink);
}

.wr-checkout__total-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--wr-ink);
}

.wr-checkout__total-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--wr-ink);
}

/* La mention de sécurité. Payer en ligne inquiète — dire qui traite le
   paiement rassure plus que n'importe quel argument. */
.wr-checkout__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 12px;
  color: var(--wr-muted);
}
.wr-checkout__secure svg { width: 13px; height: 13px; }

/* ══════════════════════════════════════════════════════════════════
   ÉCRANS DE RETOUR (succès / annulation)
   ══════════════════════════════════════════════════════════════════ */

.wr-result {
  min-height: 55vh;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.wr-result__card {
  max-width: 460px;
  text-align: center;
  padding: 44px 32px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-3xl);
  box-shadow: var(--wr-shadow-hover);
}

.wr-result__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.wr-result__icon svg { width: 32px; height: 32px; }

.wr-result__icon--success {
  background: #D1FAE5;
  color: #047857;
  animation: wrPop 500ms cubic-bezier(.34, 1.56, .64, 1);
}
.wr-result__icon--neutral {
  background: var(--wr-bg-2);
  color: var(--wr-muted);
}

@keyframes wrPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.wr-result__card h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.wr-result__card > p {
  font-size: 14px;
  color: var(--wr-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Un label qui disparaît sur mobile : l'icône suffit, et l'espace est
   précieux. Le lecteur d'écran, lui, le lit toujours. */
@media (max-width: 640px) {
  .wr-sr-md {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   L'ESPACE APPLICATIF PREND LA PLACE
   ══════════════════════════════════════════════════════════════════════

   `.wr-app` était contraint à `--wr-container` (1200 px), centré. C'est la
   bonne largeur pour un ARTICLE — pas pour un tableau de bord.

   Résultat : une sidebar de 264 px, un contenu de 900 px, et deux tiers de
   l'écran vides sur un portable de 27 pouces. On ne lit pas un dashboard,
   on le balaie : il doit occuper la place qu'on lui donne.
   ══════════════════════════════════════════════════════════════════════ */


@media (min-width: 1600px) {
  /* Au-delà, on élargit la sidebar plutôt que d'étirer le contenu à
     l'infini : une liste de liens de 400 px n'a pas de sens. */
  .wr-app { grid-template-columns: 300px 1fr; }
}

@media (max-width: 768px) {
  .wr-app { padding: 20px 20px 40px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MON COMPTE
   ══════════════════════════════════════════════════════════════════════ */

.wr-account {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

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

/* ⚠️  L'ÉDITEUR D'AVATAR A DÉMÉNAGÉ DANS `wr.css`.

   Il vivait ici. La page d'accueil obligatoire (`/app/bienvenue`) l'utilise —
   et elle a le layout du TUNNEL, qui ne charge pas `wr-app.css`.

   La photo est obligatoire pour naviguer. Elle se serait affichée comme un
   `<input type="file">` nu, sans aperçu, sans le moindre style. La première
   chose qu'un nouvel inscrit aurait vue.

   `npm run css` l'a attrapé avant toi. Un composant partagé par deux layouts
   vit dans la feuille que les deux chargent.
   ══════════════════════════════════════════════════════════════════════ */

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

.wr-lang-choice__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--wr-line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .18s ease, background .18s ease;
}

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

.wr-lang-choice__item:has(input:checked) {
  border-color: var(--wr-violet);
  background: var(--wr-violet-softer);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   TUNNEL CV
   ══════════════════════════════════════════════════════════════════════ */

.wr-tunnel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 14px;
}

.wr-tunnel__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--wr-muted-2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

a.wr-tunnel__step:hover { color: var(--wr-violet-dark); }
.wr-tunnel__step.is-current { color: var(--wr-ink); }
.wr-tunnel__step.is-done { color: var(--wr-violet-dark); }

.wr-tunnel__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--wr-bg-2);
  color: var(--wr-muted);
  flex: none;
}

.wr-tunnel__step.is-current .wr-tunnel__num {
  background: var(--wr-violet);
  color: #fff;
}

.wr-tunnel__step.is-done .wr-tunnel__num {
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
}

.wr-tunnel__bar {
  flex: 1;
  height: 2px;
  background: var(--wr-line-2);
  border-radius: 2px;
  min-width: 16px;
}

.wr-tunnel__bar.is-done { background: var(--wr-violet-2); }

@media (max-width: 640px) {
  .wr-tunnel__label { display: none; }
}

/* ── Le formulaire ─────────────────────────────────────────────── */

.wr-cv-form { display: flex; flex-direction: column; gap: 18px; }

.wr-import { flex: none; }

/* ⚠️  LES LIGNES RÉPÉTABLES ET LES CHIPS À COCHER ONT DÉMÉNAGÉ.

   Elles vivaient ici. Le tunnel CV les utilise — et il a son propre layout,
   qui ne charge PAS `wr-app.css`. Les chips « type de contrat » et
   « mobilité » se retrouvaient donc sans une seule règle : pas de flex, pas
   d'espacement, pas de pilule. Trois cases nues empilées.

   Elles sont dans `wr-tunnel.css`, avec le reste du tunnel. Plus aucune vue
   de l'espace applicatif ne les emploie : les garder ici, c'était du code
   mort qui donnait l'illusion que tout allait bien.

   Un composant vit là où il est utilisé. Défini à deux endroits, il diverge ;
   défini au mauvais endroit, il ne s'applique nulle part.
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️  LA BARRE COLLANTE A DÉMÉNAGÉ DANS `wr-tunnel.css`.

   Elle vivait ici. Les DEUX tunnels l'utilisent — le CV et l'offre — et
   aucun des deux ne charge `wr-app.css`.

   Elle se serait affichée comme un div nu : pas de fond, pas d'adhérence, le
   bouton « Publier » perdu tout en bas d'un formulaire de cinq sections.

   `npm run css` l'a attrapée avant toi. Un composant vit là où il est utilisé.
   ══════════════════════════════════════════════════════════════════════ */


/* ── Style & couleurs ──────────────────────────────────────────── */

.wr-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

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

.wr-theme:hover { border-color: var(--wr-violet-2); transform: translateY(-2px); }
.wr-theme input { position: absolute; opacity: 0; pointer-events: none; }

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

/* L'aperçu, en CSS. Une capture d'écran mentirait dès qu'on changerait le
   gabarit Python ; deux rectangles, non. */
.wr-theme__preview {
  display: flex;
  gap: 4px;
  height: 74px;
  padding: 8px;
  margin-bottom: 14px;
  background: var(--wr-card);
  border: 1px solid var(--wr-line-2);
  border-radius: 8px;
}

.wr-theme__preview span { background: var(--wr-line-2); border-radius: 3px; }

/* « Simple » = la colonne latérale (cv_primary.py), « Compact » = une
   colonne (cv_second.py) — comme le PDF, pas comme le nom le suggère. */
.wr-theme__preview--simple span:nth-child(1) { width: 32%; background: var(--wr-violet-2); }
.wr-theme__preview--simple span:nth-child(2) { flex: 1; }
.wr-theme__preview--simple span:nth-child(3) { display: none; }

.wr-theme__preview--compact { flex-direction: column; }
.wr-theme__preview--compact span:nth-child(1) { height: 14px; background: var(--wr-violet-2); }
.wr-theme__preview--compact span:nth-child(2) { flex: 1; }
.wr-theme__preview--compact span:nth-child(3) { height: 12px; }

.wr-theme__title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--wr-ink);
  margin-bottom: 3px;
}

.wr-theme__desc { display: block; font-size: 12.5px; color: var(--wr-muted); line-height: 1.5; }

.wr-palettes { display: flex; flex-wrap: wrap; gap: 12px; }

.wr-palette { cursor: pointer; text-align: center; }
.wr-palette input { position: absolute; opacity: 0; pointer-events: none; }

.wr-palette__dot {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 6px;
  box-shadow: 0 0 0 2px var(--wr-card), 0 0 0 2px transparent;
  transition: box-shadow .18s ease, transform .18s ease;
}

/* La teinte d'accent, en pastille. Une palette, ce sont DEUX couleurs : ne
   montrer que la principale, c'est en cacher la moitié. */
.wr-palette__dot > span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--wr-card);
}

.wr-palette:hover .wr-palette__dot { transform: scale(1.06); }

.wr-palette:has(input:checked) .wr-palette__dot {
  box-shadow: 0 0 0 2px var(--wr-card), 0 0 0 4px var(--wr-violet);
}

.wr-palette__name { font-size: 11.5px; color: var(--wr-muted); }

/* ── Le CV est prêt ────────────────────────────────────────────── */

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

.wr-done__preview {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 16px;
  overflow: hidden;
  min-height: 600px;
}

.wr-done__pdf { width: 100%; height: 78vh; min-height: 600px; border: 0; display: block; }

.wr-done__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }

@media (max-width: 991px) {
  .wr-done { grid-template-columns: 1fr; }
  .wr-done__side { position: static; }
  .wr-themes { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   TABLEAU DE BORD CANDIDAT
   ══════════════════════════════════════════════════════════════════════ */

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

.wr-dash__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.wr-dash__rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 92px;
}

/* ── Les compteurs ─────────────────────────────────────────────── */

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

.wr-kpi {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

a.wr-kpi:hover { transform: translateY(-2px); box-shadow: var(--wr-shadow-hover); }

.wr-kpi--violet { background: var(--wr-violet-softer); }
.wr-kpi--blue { background: #EFF6FF; }
.wr-kpi--green { background: #ECFDF5; }

.wr-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .8);
  margin-bottom: 16px;
}

.wr-kpi--violet .wr-kpi__icon { color: var(--wr-violet); }
.wr-kpi--blue .wr-kpi__icon { color: #2563EB; }
.wr-kpi--green .wr-kpi__icon { color: #10B981; }

.wr-kpi__value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--wr-ink);
  line-height: 1;
  margin-bottom: 6px;
}

.wr-kpi__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted);
}

/* ── La complétude ─────────────────────────────────────────────── */

.wr-progress {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #8A63C0, #9D7BCC);
  color: #fff;
}

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

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

.wr-progress__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 16px;
}

.wr-progress__text strong { color: #fff; font-weight: 700; }

.wr-progress__bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
  margin-bottom: 16px;
}

.wr-progress__bar span {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  transition: width .5s ease;
}

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

.wr-progress__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  background: #fff;
  color: var(--wr-violet-dark);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease;
}

.wr-progress__chip:hover { transform: translateY(-1px); }

/* ⚠️  UN JALON FAIT RESTE CLIQUABLE — LE STYLE DOIT LE DIRE.

   Il était un `<span>` inerte, d'où `cursor: default`. C'est maintenant un
   lien qui ramène au champ correspondant : c'est justement là qu'on relit
   ce qu'on a écrit. Garder le curseur par défaut aurait laissé croire à un
   élément mort — on n'aurait jamais essayé de cliquer.

   Il reste plus discret qu'un jalon manquant : fond translucide au lieu du
   blanc plein. La coche dit « c'est fait », pas « c'est verrouillé ». */
.wr-progress__chip.is-done {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
}

.wr-progress__chip.is-done:hover { background: rgba(255, 255, 255, .28); }

/* L'anneau du pourcentage. */
.wr-progress__ring {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  order: 2;
}

/* ── Le rail ───────────────────────────────────────────────────── */

.wr-me { display: flex; align-items: center; gap: 12px; }

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

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

.wr-me__name { font-size: 15px; font-weight: 700; color: var(--wr-ink); }
.wr-me__job { font-size: 12.5px; color: var(--wr-muted); }

.wr-me__count {
  font-size: 26px;
  font-weight: 800;
  color: var(--wr-violet);
  letter-spacing: -.02em;
}

/* Les conversations du rail. Un clic OUVRE LA BULLE — d'où le curseur. */
.wr-rail-convs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

.wr-rail-conv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 -10px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease;
}

.wr-rail-conv:hover { background: var(--wr-violet-softer); }

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

.wr-rail-conv__avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}

.wr-rail-conv__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wr-success);
  border: 2px solid var(--wr-card);
}

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

.wr-rail-conv__name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wr-ink);
}

.wr-rail-conv.has-unread .wr-rail-conv__name { font-weight: 700; }

.wr-rail-conv__preview {
  display: block;
  font-size: 12.5px;
  color: var(--wr-muted);
}

@media (max-width: 1200px) {
  .wr-dash,
  .wr-dash:has(.wr-dash__rail) { grid-template-columns: 1fr; }
  .wr-dash__rail { position: static; }
}

@media (max-width: 640px) {
  .wr-kpis { grid-template-columns: 1fr; }
  .wr-progress { flex-direction: column; align-items: flex-start; }
  .wr-progress__ring { order: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD ENTREPRISE
   ══════════════════════════════════════════════════════════════════════ */

/* ⚠️  UNE SEULE COLONNE PAR DÉFAUT.

   Le rail de conversations vit désormais dans la coquille (layouts/main), à
   droite de toutes les pages. Les dashboards n'ont donc plus à réserver une
   2ᵉ colonne pour lui — le faire créait soit une colonne vide (recruteur), soit
   une messagerie affichée en double.

   Le dashboard candidat garde un rail interne PROPRE (« Ma carte », favoris) :
   on lui redonne la 2ᵉ colonne uniquement s'il contient un `.wr-dash__rail`. */
.wr-dash { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.wr-dash:has(.wr-dash__rail) { grid-template-columns: 1fr 300px; }
.wr-dash__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wr-dash__side,
.wr-dash__rail { position: sticky; top: 92px; }

/* ── Onglets ──
   De vrais liens. Sans JavaScript, chacun charge sa page ; avec, on bascule
   sans recharger. Un onglet qui exige du JS est un onglet cassé. */
.wr-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.wr-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--wr-line);
  background: var(--wr-card);
  color: var(--wr-ink-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s ease;
}

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

.wr-tab.is-active {
  background: var(--wr-violet);
  border-color: var(--wr-violet);
  color: #fff;
}

/* Sous-onglets — favoris : « Offres sauvegardées » / « Entreprises
   sauvegardées ». Le même composant, un cran plus discret ; le nombre de
   favoris de chaque sorte passe par `.wr-tab__badge`, déjà défini. */
.wr-tabs--sub { margin: -4px 0 16px; }
.wr-tabs--sub .wr-tab { padding: 8px 14px; font-size: 13px; }

.wr-tab__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-soft);
  color: var(--wr-violet-dark);
  font-size: 11.5px;
  font-weight: 700;
}

.wr-tab.is-active .wr-tab__badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* ── Bandeau du tableau de bord : quatre colonnes égales, sans boutons ──
   Le même composant, mais en BANDEAU : pas de pastilles, une seule ligne
   partagée en quatre, le texte posé sur un filet, l'onglet courant
   souligné en violet. Sur un téléphone, l'icône reste et le libellé passe
   sous elle, pour que quatre colonnes tiennent sur 360 px. */
.wr-tabs--bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--wr-line);
}
.wr-tabs--bar .wr-tab {
  justify-content: center;
  padding: 18px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--wr-muted);
  text-align: center;
  white-space: nowrap;
}
.wr-tabs--bar .wr-tab:hover { border-color: var(--wr-line-2); color: var(--wr-ink); background: transparent; }
.wr-tabs--bar .wr-tab.is-active {
  background: transparent;
  color: var(--wr-violet);
  border-bottom-color: var(--wr-violet);
}
.wr-tabs--bar .wr-tab.is-active .wr-tab__badge { background: var(--wr-violet-soft); color: var(--wr-violet-dark); }

@media (max-width: 640px) {
  .wr-tabs--bar .wr-tab { flex-direction: column; gap: 5px; padding: 12px 4px; font-size: 11.5px; white-space: normal; line-height: 1.15; }
  .wr-tabs--bar .wr-tab__badge { position: absolute; transform: translate(18px, -14px); }
  .wr-tabs--bar .wr-tab { position: relative; }
}

/* Un panneau caché doit l'être. `[hidden]` est une règle du NAVIGATEUR :
   toute règle d'auteur qui pose un `display` l'annule. On a déjà payé ce
   prix sur la bulle de messagerie — le panneau restait ouvert en permanence. */
[data-panel][hidden] { display: none; }

/* ── Les quatre chiffres ── */

.wr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.wr-stat { padding: 22px; border-radius: 16px; }

.wr-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  margin-bottom: 20px;
}

.wr-stat__value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--wr-ink);
  margin-bottom: 6px;
}

.wr-stat__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wr-muted);
}

/* Quatre pastels. Ce ne sont pas quatre accents : c'est UN accent (le violet)
   et trois teintes de repérage. On ne cherche pas « le vert », on cherche
   « les messages » — la couleur ne fait qu'aider l'œil à revenir au même
   endroit. */
.wr-stat--blue   { background: #EFF6FF; }
.wr-stat--blue   .wr-stat__icon { color: #2563EB; }
.wr-stat--violet { background: var(--wr-violet-soft); }
.wr-stat--violet .wr-stat__icon { color: var(--wr-violet); }
.wr-stat--green  { background: #ECFDF5; }
.wr-stat--green  .wr-stat__icon { color: #10B981; }
.wr-stat--orange { background: #FFF7ED; }
.wr-stat--orange .wr-stat__icon { color: #EA580C; }

/* ── Partager sa page ── */

.wr-share { display: flex; gap: 10px; }
.wr-share .wr-input { flex: 1; font-size: 13.5px; color: var(--wr-muted); }
.wr-share .wr-btn { flex: none; }

/* ── L'abonnement ── */

.wr-premium-card {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 20px;
  padding: 28px;
}

.wr-premium-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  background: #065F46;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.wr-premium-card__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #064E3B;
  margin: 0 0 6px;
}

.wr-premium-card__sub { font-size: 14.5px; color: #047857; margin: 0 0 22px; }

.wr-premium-card__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  margin-bottom: 22px;
}

.wr-premium-card__cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #047857;
  margin-bottom: 6px;
}

.wr-premium-card__val {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #064E3B;
}

.wr-premium-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  flex: none;
}

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

.wr-perk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-size: 13px;
  font-weight: 600;
}

.wr-perk svg { color: #10B981; }

/* ── Notifications ── */

.wr-notif {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--wr-line);
  background: var(--wr-card);
  margin-bottom: 10px;
}

.wr-notif.is-unread { border-color: var(--wr-violet-2); background: var(--wr-violet-softer); }

.wr-notif__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--wr-bg-2);
  color: var(--wr-muted);
}

.wr-notif__icon--message     { background: var(--wr-violet-soft); color: var(--wr-violet-dark); }
.wr-notif__icon--application { background: #ECFDF5; color: #10B981; }
.wr-notif__icon--offer       { background: #EFF6FF; color: #2563EB; }

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

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

.wr-notif__desc { font-size: 13px; color: var(--wr-muted); line-height: 1.5; }

.wr-notif__time { font-size: 12px; color: var(--wr-muted-2); flex: none; white-space: nowrap; }

@media (max-width: 1200px) {
  .wr-dash,
  .wr-dash:has(.wr-dash__side) { grid-template-columns: 1fr; }
  .wr-dash__side { position: static; }
}

@media (max-width: 900px) {
  .wr-stats { grid-template-columns: 1fr 1fr; }
  .wr-premium-card__box { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .wr-stats { grid-template-columns: 1fr; }
  .wr-share { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════
   CLASSES UTILISÉES SANS RÈGLE

   ⚠️  ELLES N'EXISTAIENT PAS. LES VUES LES ÉCRIVAIENT QUAND MÊME.

   `.wr-app-title` et `.wr-app-sub` : le titre de chaque page de l'espace
   applicatif — sur le tableau de bord, le compte, le CV. Sans règle, un
   `<h1>` nu à la taille par défaut du navigateur.

   `.wr-tab-panel` : les onglets du profil CV. Sans `[hidden] { display:none }`,
   les trois panneaux s'affichaient EN MÊME TEMPS — on a déjà payé ce prix
   sur la bulle de messagerie.

   Une classe qu'on écrit sans l'avoir définie ne casse rien : elle ne fait
   rien. C'est ce qui la rend difficile à voir.
   ══════════════════════════════════════════════════════════════════════ */

.wr-app-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--wr-ink);
}

.wr-app-sub {
  margin: 0;
  font-size: 14px;
  color: var(--wr-muted);
}

/* Un panneau caché doit l'être. `[hidden]` est une règle du NAVIGATEUR : la
   moindre règle d'auteur qui pose un `display` l'annule. */
.wr-tab-panel[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   LA COQUILLE   —   header · sidebar · contenu · rail · footer
   ══════════════════════════════════════════════════════════════════════

   ⚠️  LA GRILLE N'EST PLUS DEFINIE ICI. → public/css/wr-shell.css

   Elle l'etait a six endroits de ce fichier (`.wr-shell`, `--full`,
   `--no-rail`, `--rail-collapsed`, `.is-side-collapsed`, plus deux media
   queries), toutes en concurrence sur `grid-template-columns`. Le
   resultat dependait de l'ordre des lignes, et une page sans sidebar
   voyait son contenu tomber dans la colonne de 68 ou 264 px.

   wr-shell.css est chargee en dernier et fait autorite. Ce qui reste ici
   est l'APPARENCE des colonnes — cards, liens, badges, alertes — pas leur
   geometrie.

   TOUT EST A 100 %. Le header, le corps, le footer : rien n'est contraint
   a 1200 px centre. Sur un ecran de 27 pouces, deux tiers de la page
   etaient blancs. Un site de recherche d'emploi, on le BALAIE.
   ══════════════════════════════════════════════════════════════════════ */

/* ── La sidebar ── */

.wr-side__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 16px;
  padding: 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   TITRE D'ESPACE — « Candidat » / « Entreprise » en tête de sidebar

   Un compte connecté sait toujours DANS QUEL espace il est : le type de
   compte est affiché en tête de colonne. Masqué quand la sidebar est
   repliée (comme les libellés de section) et absent pour les visiteurs.
   ══════════════════════════════════════════════════════════════════════ */
.wr-side__space {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--wr-violet-softer, #F6F1FD);
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  color: var(--wr-violet, #8A63C1);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.wr-side__space svg { width: 15px; height: 15px; flex: none; }
.wr-side.is-collapsed .wr-side__space { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   « ENVOYER MON CV À CETTE ENTREPRISE » (wr-interest)

   Le formulaire d'intérêt des fiches annuaire : message + document joints
   au like. Version pleine (fiche publique) et compacte (aside candidat).
   ══════════════════════════════════════════════════════════════════════ */
.wr-interest {
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  background: var(--wr-violet-softer, #F6F1FD);
  border-radius: 16px;
  padding: 20px;
}
.wr-interest--compact { padding: 16px; }

/* ── Le bouton d'envoi et, pour le visiteur, la porte « Déjà un compte ? » ── */
.wr-interest__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wr-interest__login {
  font-size: 13px; font-weight: 600; color: var(--wr-violet); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.wr-interest__login:hover { text-decoration: underline; }

.wr-interest__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.wr-interest__ico {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--wr-violet, #8A63C1);
  color: #fff;
}
.wr-interest__ico svg { width: 16px; height: 16px; }
.wr-interest__title { font-size: 17px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0; }
.wr-interest--compact .wr-interest__title { font-size: 14.5px; }

.wr-interest__intro {
  font-size: 13.5px;
  color: var(--wr-muted, #6B7280);
  line-height: 1.55;
  margin: 0 0 14px;
}
.wr-interest--compact .wr-interest__intro { font-size: 12.5px; }

.wr-interest__form .wr-field { margin-bottom: 12px; }
.wr-interest__form textarea.wr-input { resize: vertical; min-height: 72px; }
.wr-interest__file { padding: 9px 12px; background: #fff; }
.wr-interest__hint { font-size: 12px; color: var(--wr-muted-2, #9CA3AF); margin: 6px 0 0; }

/* « Votre CV est déjà joint » — avant le champ du document, en gros et en
   couleur : ce champ complète le CV, il ne le remplace pas. */
.wr-interest__cvnote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 0 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--wr-violet-2, #A98AD3);
  border-radius: 14px;
  background: linear-gradient(135deg, #F8F4FD 0%, #F2EDFA 100%);
  color: var(--wr-ink-2, #374151);
}
.wr-interest__cvnoteico {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--wr-violet, #8A63C1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(138, 99, 193, .3);
}
.wr-interest__cvnoteico svg { width: 19px; height: 19px; }
.wr-interest__cvnotebody { display: grid; gap: 4px; min-width: 0; }
.wr-interest__cvnotebody strong {
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--wr-violet-dark, #6B47A6);
}
.wr-interest__cvnotebody > span { font-size: 13px; line-height: 1.55; }
.wr-interest__cvnotebody a { color: var(--wr-violet, #8A63C1); font-weight: 700; white-space: nowrap; }
/* L'astuce, sous le message : séparée d'un trait, en vert « conseil ». */
.wr-interest__cvtip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px dashed rgba(138, 99, 193, .35);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: #047857;
}
.wr-interest__cvtip svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.wr-interest__cvtip a { color: #047857; text-decoration: underline; text-underline-offset: 2px; }
.wr-interest--compact .wr-interest__cvnote { padding: 12px; gap: 10px; }
.wr-interest--compact .wr-interest__cvnoteico { width: 30px; height: 30px; border-radius: 9px; }
.wr-interest--compact .wr-interest__cvnotebody strong { font-size: 14px; }
.wr-interest--compact .wr-interest__cvnotebody > span { font-size: 12.5px; }

/* Le CV qui part avec la candidature, à rouvrir dans un onglet (26/10). */
.wr-interest__cvdocs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wr-interest__cvnotebody a.wr-interest__cvdoc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wr-violet-2, #A98AD3);
  color: var(--wr-violet-dark, #6B47A6); font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.wr-interest__cvnotebody a.wr-interest__cvdoc:hover { background: var(--wr-violet-softer, #F8F4FD); }
.wr-interest__cvdoc svg { width: 15px; height: 15px; flex: none; }

/* Pas de CV : le formulaire laisse place à ce panneau (26/10). */
.wr-interest__nocv {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; margin: 4px 0 2px; padding: 22px 18px;
  border: 1.5px dashed var(--wr-violet-2, #A98AD3); border-radius: 16px;
  background: linear-gradient(135deg, #FBF8FE 0%, #F4EEFB 100%);
}
.wr-interest__nocvico {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; color: var(--wr-violet, #8A63C1);
  box-shadow: 0 0 0 6px rgba(138, 99, 193, .12);
}
.wr-interest__nocvico svg { width: 22px; height: 22px; }
.wr-interest__nocvtitle { font-size: 16px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin-top: 6px; }
.wr-interest__nocvtext { font-size: 13.5px; line-height: 1.55; color: var(--wr-ink-2, #374151); margin: 0; max-width: 420px; }
.wr-interest__nocvactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.wr-interest__nocvafter { font-size: 12px; color: var(--wr-muted, #6B7280); margin: 4px 0 0; }

/* Déjà postulé à cette offre : dit AVANT le formulaire, en vert — c'est
   une information rassurante, pas un avertissement. */
.wr-interest__already {
  display: flex; align-items: flex-start; gap: 8px;
  margin: -4px 0 14px; padding: 9px 12px;
  border-radius: 10px;
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
  font-size: 12.5px; line-height: 1.5;
}
.wr-interest__already svg { flex: none; margin-top: 2px; }

/* Le refus du serveur, dans la modale (envoi par script). */
.wr-interest__error {
  margin: 0 0 12px; padding: 9px 12px;
  border-radius: 10px;
  background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B;
  font-size: 12.5px; line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   « CANDIDATURE ENVOYÉE » — le panneau qui remplace le formulaire
   (modale de la fiche d'une offre, wr-cv-modal.js)

   Centré, coche verte, récapitulatif de ce qui est parti, deux actions.
   Il garde le cadre violet du formulaire : c'est la même card qui change
   d'état, pas une autre fenêtre qui s'ouvre.
   ══════════════════════════════════════════════════════════════════════ */
.wr-interest__done { text-align: center; padding: 6px 4px 2px; outline: none; }
.wr-interest__done[hidden] { display: none; }

.wr-interest__doneico {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #D1FAE5; color: #047857;
  box-shadow: 0 0 0 8px rgba(16, 185, 129, .12);
  animation: wr-interest-pop .38s cubic-bezier(.32, .72, 0, 1) both;
}
.wr-interest__doneico svg { width: 26px; height: 26px; }

@keyframes wr-interest-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.wr-interest__donetitle {
  margin: 0 0 6px;
  font-size: 19px; font-weight: 800; color: var(--wr-ink, #1E1B2E);
}
.wr-interest--compact .wr-interest__donetitle { font-size: 17px; }

.wr-interest__donetext {
  margin: 0 auto 14px; max-width: 38ch;
  font-size: 13.5px; line-height: 1.55; color: var(--wr-muted, #6B7280);
}

/* Ce qui est parti : une ligne par pièce, coche verte. */
.wr-interest__recap {
  list-style: none; margin: 0 auto 14px; padding: 12px 14px;
  max-width: 320px;
  display: grid; gap: 7px;
  background: #fff;
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  border-radius: 12px;
  text-align: left;
}
.wr-interest__recap li {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--wr-ink, #1E1B2E);
}
.wr-interest__recap li[hidden] { display: none; }
.wr-interest__recap li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-interest__recap svg { width: 15px; height: 15px; flex: none; color: #059669; }

.wr-interest__donehint {
  margin: 0 auto 16px; max-width: 40ch;
  font-size: 12.5px; line-height: 1.5; color: var(--wr-muted, #6B7280);
}
.wr-interest__donehint[hidden] { display: none; }

.wr-interest__doneactions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.wr-interest__doneactions .wr-btn[hidden] { display: none; }

@media (max-width: 540px) {
  .wr-interest__doneactions .wr-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-interest__doneico { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   « CE CV SERA PRÉSENTÉ À {ENTREPRISE} » (wr-present-to)

   Le bandeau du tunnel visiteur venu d'une fiche annuaire — et sa
   variante de confirmation sur la page terminée.
   ══════════════════════════════════════════════════════════════════════ */
.wr-present-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  background: var(--wr-violet-softer, #F6F1FD);
  color: var(--wr-violet, #8A63C1);
  font-size: 13.5px;
  font-weight: 700;
}
.wr-present-to svg { width: 17px; height: 17px; flex: none; }
.wr-present-to--done {
  margin: 18px auto 0;
  max-width: 480px;
  border-color: #A7F3D0;
  background: #ECFDF5;
  color: #047857;
}

/* ══════════════════════════════════════════════════════════════════════
   MOT DU CANDIDAT — dans la rangée « Candidats intéressés » (recruteur)
   ══════════════════════════════════════════════════════════════════════ */
/* ── CV reçu : une fiche par envoi (onglet « CV reçus ») ─────────────
   On lit ici : le message entier, le document, la date. Même card que le
   reste de l'espace, un en-tête nom + date, une citation, des actions. */
.wr-recu {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-xl);
  box-shadow: var(--wr-shadow);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.wr-recu__head { display: flex; align-items: flex-start; gap: 12px; }
.wr-recu__avatar { border-radius: 50%; }
.wr-recu__avatar img { border-radius: 50%; }
.wr-recu__who { flex: 1; min-width: 0; }
.wr-recu__name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--wr-ink);
}
.wr-recu__meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px;
  font-size: 12.5px; color: var(--wr-muted);
}
.wr-recu__job { color: var(--wr-violet); font-weight: 600; }
.wr-recu__date { flex: none; font-size: 12px; color: var(--wr-muted); white-space: nowrap; }
.wr-recu__message {
  margin: 12px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--wr-violet);
  background: var(--wr-violet-softer);
  border-radius: 0 var(--wr-r-md) var(--wr-r-md) 0;
  font-size: 13.5px; line-height: 1.6; color: var(--wr-ink-2);
  white-space: pre-line;
}
.wr-recu__nomessage { margin: 12px 0 0; font-size: 13px; color: var(--wr-muted-2); font-style: italic; }
.wr-recu__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wr-recu__board { margin-left: auto; }
.wr-recu__actions .wr-btn svg { width: 14px; height: 14px; flex: none; }
/* Le profil sans premium : présent, mais visiblement fermé. */
.wr-recu__locked { color: var(--wr-muted); border-style: dashed; }
.wr-recu__locked:hover { color: var(--wr-violet); border-color: var(--wr-violet-2); }

@media (max-width: 520px) {
  .wr-recu__head { flex-wrap: wrap; }
  .wr-recu__date { width: 100%; padding-left: 44px; }
  .wr-recu__board { margin-left: 0; }
}

/* ── Rangée verrouillée (sans premium) ─────────────────────────────────
   Pas de pointeur, pas de survol, nom et avatar voilés, cadenas à droite.
   `user-select: none` sur le voile : un texte flouté reste copiable sinon. */
.wr-row--locked { cursor: default; }
.wr-row--locked:hover { transform: none; box-shadow: none; border-color: var(--wr-line); }
.wr-row__veil { filter: blur(5px); user-select: none; pointer-events: none; }
.wr-row__lock {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 8px 12px; border-radius: 100px;
  border: 1px solid var(--wr-line); background: var(--wr-bg-2);
  color: var(--wr-muted); font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: background var(--wr-t), color var(--wr-t), border-color var(--wr-t);
}
.wr-row__lock svg { width: 15px; height: 15px; }
.wr-row__lock:hover { background: var(--wr-violet-soft); border-color: var(--wr-violet); color: var(--wr-violet); }

/* Le bandeau au-dessus d'une liste verrouillée. */
.wr-premium-lock {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 14px 16px;
  border: 1px solid var(--wr-violet-2); border-radius: var(--wr-r-xl);
  background: linear-gradient(135deg, var(--wr-violet-softer), var(--wr-card));
}
.wr-premium-lock__ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--wr-violet); color: #fff;
}
.wr-premium-lock__ico svg { width: 18px; height: 18px; }
.wr-premium-lock__body { flex: 1; min-width: 220px; }
.wr-premium-lock__body strong { display: block; font-size: 14.5px; color: var(--wr-ink); margin-bottom: 2px; }
.wr-premium-lock__body p { margin: 0; font-size: 13px; color: var(--wr-muted); line-height: 1.5; }

.wr-row__interest {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--wr-ink-2, #3F3A52);
  font-style: italic;
  line-height: 1.5;
}
.wr-row__interest svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--wr-violet, #8A63C1); }
.wr-row__interesttxt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE FINALE CV — aperçu + en-tête (wr-cv-final / wr-cvready)

   ⚠️  DÉPLACÉ DEPUIS wr-tunnel.css. La page « CV terminé » du candidat
   (/app/candidat/cv/generateur/pret) est désormais rendue HORS mode tunnel
   pour rendre l'interface complète — wr-tunnel.css n'y est donc plus
   chargée. Ces classes servent aussi au tunnel visiteur (tunnel/done.ejs) :
   leur place est ici, dans la feuille de la coquille, chargée partout.
   ══════════════════════════════════════════════════════════════════════ */
.wr-cv-final {
  margin: 24px 0 4px;
  width: 100%;
}
.wr-cv-final__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 20px;
  color: var(--wr-muted, #6B7280);
  font-size: 14px;
  font-weight: 600;
}
.wr-cv-final__spin {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--wr-violet-soft, #EDE6F8);
  border-top-color: var(--wr-violet, #8A63C1);
  animation: wrCvSpin .8s linear infinite;
}
@keyframes wrCvSpin { to { transform: rotate(360deg); } }

.wr-cv-final__frame {
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(30, 27, 46, .08);
  background: #fff;
}
.wr-cv-final__frame iframe {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 0;
}

/* Aperçu du CV sur la page finale — affiché directement (object + iframe). */
.wr-cv-final__obj,
.wr-cv-final__iframe {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 560px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 14px;
  background: #fff;
}
.wr-cv-final__fallback {
  padding: 40px 20px; text-align: center; color: var(--wr-muted, #6B7280); font-size: 14px;
}
.wr-cv-final__fallback a { color: var(--wr-violet, #8A63C1); font-weight: 700; margin-left: 4px; }

.wr-cvready__head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.wr-cvready__check {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  background: #ECFDF5; color: #059669;
  display: grid; place-items: center;
}
.wr-cvready__title { font-size: 22px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0; }
.wr-cvready__sub { font-size: 14px; color: var(--wr-muted, #6B7280); margin: 4px 0 0; }
/* La carte du portfolio suit les boutons de téléchargement : sans marge, elle
   leur était collée. Même respiration qu'entre les autres blocs de la page.
   Le sélecteur cible la `.wr-card` qui suit les actions, pas la carte
   elle-même — le bloc est partagé avec le tableau de bord, où l'espacement
   vient de sa grille. */
.wr-cvready__actions + .wr-card { margin-top: 22px; }

.wr-cvready__actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px;
}

.wr-side__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wr-muted-2);
  padding: 8px 12px 6px;
}

.wr-side__link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--wr-ink-2);
  font: 500 13.5px/1.2 inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.wr-side__link svg { width: 18px; height: 18px; flex: none; opacity: .65; }

.wr-side__link:hover { background: var(--wr-bg-2); color: var(--wr-ink); }
.wr-side__link:hover svg { opacity: 1; }

.wr-side__link.is-active {
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-weight: 600;
}

.wr-side__link.is-active svg { opacity: 1; color: var(--wr-violet); }

/* Le CTA de la sidebar anonyme : « Créer mon CV ». C'est la porte. */
.wr-side__link--cta { color: var(--wr-violet-dark); font-weight: 700; }

/* « Créer mon CV gratuit » (visiteur) : un bouton violet plein. */
.wr-side__link--cvfree {
  background: var(--wr-violet);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(138, 99, 193, .3);
}
.wr-side__link--cvfree svg { opacity: 1; color: #fff; }
.wr-side__link--cvfree:hover { background: var(--wr-violet-dark); color: #fff; }
.wr-side__link--cvfree:hover svg { color: #fff; }
.wr-side__link--cta svg { opacity: 1; color: var(--wr-violet); }

.wr-side__link--danger { color: var(--wr-danger); }
.wr-side__link--danger:hover { background: #FEF2F2; color: var(--wr-danger); }

/* ⚠️  VERROUILLÉ, PAS DÉSACTIVÉ.

   Un `pointer-events: none` en ferait un lien mort : on clique, rien ne se
   passe, on ne comprend pas. Il reste cliquable — et il ouvre la connexion.
   Le cadenas dit POURQUOI, le clic dit COMMENT. */
.wr-side__link.is-locked { color: var(--wr-muted-2); }
.wr-side__link.is-locked svg { opacity: .45; }

.wr-side__link.is-locked:hover {
  background: var(--wr-violet-softer);
  color: var(--wr-violet-dark);
}

.wr-side__link.is-locked:hover svg { opacity: .8; color: var(--wr-violet); }

/* Le cadenas en fin de lien (annuaire verrouillé sans CV). */
.wr-side__lock { width: 15px; height: 15px; margin-left: auto; opacity: .5; }
/* Bêta non encore acceptée : lien pleinement cliquable, seul le cadenas
   signale le statut (on ne grise pas comme is-locked). */
.wr-side__link.is-beta-locked { color: inherit; }
.wr-side__link.is-beta-locked .wr-side__lock { opacity: .55; }
.wr-side__link.is-beta-locked:hover .wr-side__lock { opacity: .85; color: var(--wr-violet); }

/* Liens documents (CV généré / importé) dans la sidebar. */
.wr-side__ext { width: 14px; height: 14px; margin-left: auto; opacity: .55; }
.wr-side__link--muted { color: var(--wr-muted-2, #9CA3AF); }
.wr-side__link--muted svg:first-of-type { opacity: .5; }
.wr-side__badge-absent {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--wr-muted-2, #9CA3AF);
  background: #F1F3F7;
  padding: 2px 7px; border-radius: 999px;
}

.wr-side__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex: none;
}

.wr-side__dot--success { background: #10B981; }

/* L'alerte « CV non publié ». En haut, avant tout : c'est l'information la
   plus importante de l'espace. */
.wr-side__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.45;
}

.wr-side__alert--warning { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.wr-side__alert--pending { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }

.wr-side__alert-icon { flex: none; }
.wr-side__alert-icon svg { width: 16px; height: 16px; }
.wr-side__alert strong { display: block; margin-bottom: 2px; font-size: 13px; }

/* ── Le rail ── */

/* Position et largeur du rail : wr-shell.css. */

.wr-rail__card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: 16px;
  padding: 16px;
}

.wr-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;

  /* ⚠️  PLUS DE `text-transform: uppercase`.

     C'est lui qui affichait « WHILEPROJECT » alors que le nom est
     « Whileproject ». La casse d'un NOM PROPRE se décide dans le nom, pas dans
     le CSS : forcer les majuscules, c'est réécrire le nom du client.

     `wr-logo-name` porte déjà sa propre taille et son propre poids — le rail
     n'a rien à imposer par-dessus. */
  color: var(--wr-muted-2);
}

.wr-rail__brand svg { width: 26px; height: 26px; flex: none; }

.wr-rail__locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 11px;
  background: var(--wr-bg-2);
  color: var(--wr-muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}

.wr-rail__locked:hover { background: var(--wr-violet-softer); color: var(--wr-violet-dark); }
.wr-rail__locked > span { flex: none; opacity: .6; }

.wr-rail__all { display: block; margin-top: 10px; font-size: 13px; }

/* ── Responsive ──
   Les seuils (rail sous 1280px, sidebar en drawer sous 991px) sont dans
   wr-shell.css, avec le reste de la grille. Les avoir en double, ici et
   la-bas, c'etait deux endroits ou corriger le meme bug. */

/* ══════════════════════════════════════════════════════════════════════
   PUBLIER, GRATUITEMENT

   Le bloc affichait un prix. Il affiche une promesse.
   ══════════════════════════════════════════════════════════════════════ */

.wr-publish--free { border-color: #A7F3D0; background: #ECFDF5; }
/* Expirée : ambre, le même bloc — on ne dramatise pas, on invite à rafraîchir. */
.wr-publish--expired { border-color: #FDE68A; background: #FFFBEB; }
.wr-publish--expired .wr-publish__icon { background: #F59E0B; }

.wr-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 100px;
  background: #065F46;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: none;
}

.wr-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 13.5px;
  margin-bottom: 20px;
}

.wr-banner--free {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.wr-banner svg { flex: none; }
.wr-banner strong { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   LA PAGE COURANTE, DANS LA SIDEBAR

   Le fond violet existait déjà. On ajoute un TRAIT À GAUCHE.

   ⚠️  POURQUOI UN TRAIT, PUISQU'IL Y A DÉJÀ UN FOND ?

   Parce que le fond du survol et le fond de l'actif se ressemblent — et sur une
   sidebar de quinze liens, on cherche. Le trait, lui, ne peut appartenir qu'à
   UN lien. On le voit sans lire.

   C'est la différence entre « je peux cliquer ici » et « je suis ici ».
   ══════════════════════════════════════════════════════════════════════ */

.wr-side__link {
  position: relative;
}

.wr-side__link.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--wr-violet);
}

/* Le survol d'un lien ACTIF ne l'assombrit pas : on y est déjà. */
.wr-side__link.is-active:hover {
  background: var(--wr-violet-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   « AJOUTER UNE ANNONCE » — un lien d'ACTION dans la sidebar

   Les autres liens mènent à des pages à consulter. Celui-ci déclenche une
   action. On le distingue : couleur de marque, léger fond, pour qu'il ne se
   noie pas dans la navigation.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   « NOUVELLE ANNONCE » — le lien mis en avant

   ⚠️  PAS LA MÊME TEINTE QUE L'ÉTAT ACTIF, ET C'EST TOUT L'ENJEU.

   `.wr-side__link.is-active` porte déjà `--wr-violet-soft` (#F2EDFA) : c'est
   le fond qui dit « vous êtes sur cette page ». Donner le MÊME fond à un
   lien en permanence rendrait les deux indiscernables — on ne saurait plus
   sur quelle page on se trouve, et la mise en avant aurait détruit une
   information plus utile qu'elle.

   D'où `--wr-violet-softer` (#F8F4FD), une teinte plus claire, déjà employée
   ailleurs dans la charte. Les trois états se lisent alors en progression :

       au repos   #F8F4FD   « c'est important »
       au survol  #F2EDFA   « je le vise »
       actif      #F2EDFA + texte violet   « j'y suis »

   ⚠️  L'ORDRE DES RÈGLES SUFFIT, PAS BESOIN DE `!important`.

   `.wr-side__link.is-active` a une spécificité de (0,2,0) contre (0,1,0)
   ici : l'état actif l'emporte de lui-même, où qu'il soit dans la feuille.
   Un `!important` posé ici aurait figé le fond clair même sur la page
   courante.
   ══════════════════════════════════════════════════════════════════════ */

.wr-side__link--accent {
  background: var(--wr-violet-softer);
  color: var(--wr-violet-dark);
  font-weight: 600;
}

.wr-side__link--accent svg { color: var(--wr-violet); opacity: 1; }

.wr-side__link--accent:hover {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}

/* ══════════════════════════════════════════════════════════════════════
   UN TUNNEL DANS LA COQUILLE DU SITE

   Les tunnels (CV, offre, première connexion) sont désormais rendus dans
   `layouts/main` — avec sidebar, header, rail, footer.

   ⚠️  Leur CSS a été conçu pour un layout NU (`layouts/tunnel`), plein écran,
   fond crème. Dans la coquille, la colonne centrale est plus étroite et le
   fond est déjà posé. On adapte, sans réécrire.

   `wr-in-tunnel` est sur le <body>. Tout ce qui suit ne s'applique QUE là.
   ══════════════════════════════════════════════════════════════════════ */

/* Le fond crème du tunnel était sur son propre <body>. Ici, le body est celui
   du site — on ne le repeint pas. Mais on donne au panneau du tunnel un fond
   distinct, pour qu'il se détache de la coquille. */
.wr-in-tunnel .wr-tun-panel {
  background: #FDFBF7;
  border: 1px solid var(--wr-line);
  border-radius: 20px;
  padding: 32px;
}

/* ⚠️  L'APERÇU CÔTE À CÔTE NE RENTRE PLUS.

   `wr-tun-wrap--split` mettait le formulaire (1fr) et l'aperçu du CV (340px)
   côte à côte, sur 1000px. La colonne centrale de la coquille n'a pas cette
   largeur — l'aperçu déborderait ou écraserait le formulaire.

   On empile : formulaire d'abord, aperçu dessous. Sur un parcours, voir son CV
   sous le formulaire plutôt qu'à côté ne change rien à l'usage. */
.wr-in-tunnel .wr-tun-wrap,
.wr-in-tunnel .wr-tun-wrap--wide,
.wr-in-tunnel .wr-tun-wrap--split {
  max-width: 100%;
  display: block;
  grid-template-columns: none;
}

.wr-in-tunnel .wr-tun-wrap--split > * + * {
  margin-top: 24px;
}

/* L'aperçu du CV : en pleine largeur sous le formulaire, plus en colonne
   collante de 340px. */
.wr-in-tunnel .wr-cvprev {
  position: static;
  max-width: 480px;
  margin-inline: auto;
}

/* La barre collante du bas (« continuer ») reste, mais dans la colonne, pas
   sur toute la largeur de l'écran. */
.wr-in-tunnel .wr-cv-bar {
  position: sticky;
  bottom: 0;
}

/* Le titre du tunnel était dimensionné pour un plein écran. Dans une colonne
   plus étroite, on le calme d'un cran. */
.wr-in-tunnel .wr-tun-h1 {
  font-size: clamp(24px, 4vw, 34px);
}

/* ══════════════════════════════════════════════════════════════════════
   RECOMMANDATIONS BASÉES SUR LE CV (wr-reco)
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   PAS DE CARD DANS UNE CARD

   `.wr-list` porte son propre fond, son bord et son arrondi : posée DANS le
   corps d'une card, elle dessinait un second cadre à un pixel du premier.
   À l'intérieur d'une card, la liste s'efface — les rangées et leurs filets
   suffisent à la structurer, et le cadre reste celui de la card.

   Les filets latéraux de la card reprennent la largeur du corps : la liste
   déborde volontairement du padding pour que ses séparateurs aillent d'un
   bord à l'autre, comme dans une liste de réglages.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-card__body > .wr-list,
.wr-card__body .wr-list {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin: 0 -24px -4px;   /* le padding de `.wr-card__body` */
}

.wr-card__body .wr-list > .wr-row { padding-left: 24px; padding-right: 24px; }
.wr-card__body .wr-list > .wr-row:first-child { border-top: 1px solid var(--wr-line, #EEF1F7); }
.wr-card__body .wr-list > .wr-row:last-child { border-bottom: 0; }

/* ⚠️  C'EST UNE CARD, PLUS UN SIMPLE FILET.

   Ce bloc vivait DANS une autre card : un trait de séparation suffisait
   alors. Sorti pour devenir autonome, il a gardé son filet — un titre et
   une liste posés à même la page, sans cadre, à côté de cards qui en ont
   un. Il reprend donc le fond, le bord et l'arrondi des autres. */
.wr-reco {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--wr-card, #fff);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-xl, 18px);
  box-shadow: var(--wr-shadow, 0 1px 2px rgba(17, 24, 39, .04));
}

.wr-reco__head { margin-bottom: 14px; }
.wr-reco__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--wr-ink, #1E1B2E); margin: 0 0 2px;
}
.wr-reco__title svg { color: var(--wr-violet, #8A63C1); }
.wr-reco__sub { font-size: 12.5px; color: var(--wr-muted, #6B7280); }

/* Une seule liste, pas une pile de cartes : chaque item était encadré et
   arrondi, ce qui multipliait les bords dans un bloc qui en a déjà un. Des
   rangées séparées par un filet se lisent d'une traite. */
/* Les filets vont d'un bord à l'autre de la card : la liste déborde du
   padding, comme dans une liste de réglages. */
.wr-reco__list {
  display: flex; flex-direction: column;
  margin: 0 -22px -20px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}


.wr-reco__item {
  display: flex; align-items: center; gap: 12px;
  /* 22px de côté : la largeur du padding de la card, pour que le texte
     s'aligne sur le titre au-dessus. */
  padding: 13px 22px;
  border-bottom: 1px solid var(--wr-line, #EEF1F7);
  transition: background .12s ease;
}

.wr-reco__item:last-child { border-bottom: 0; }
.wr-reco__item:hover { background: var(--wr-violet-softer, #F7F4FC); }
.wr-reco__item:hover .wr-reco__name { color: var(--wr-violet, #8A63C1); }
.wr-reco__main { flex: 1; min-width: 0; }
.wr-reco__name {
  display: block; font-size: 14px; font-weight: 600; color: var(--wr-ink, #1E1B2E);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-reco__meta {
  display: block; font-size: 12.5px; color: var(--wr-muted, #6B7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-reco__score {
  flex: none;
  font-size: 12px; font-weight: 700;
  color: var(--wr-violet-dark, #5B3E8E);
  background: var(--wr-violet-soft, #EDE6F8);
  border-radius: 999px; padding: 4px 10px;
}
.wr-reco__chevron { width: 16px; height: 16px; flex: none; color: var(--wr-muted-2, #9CA3AF); }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD RECRUTEUR — espacement entre les cartes empilées

   Les sections « Partager la page » et la carte premium/beige étaient collées :
   `.wr-card` n'a pas de marge propre. On espace les SECTIONS adjacentes du
   panneau, sans toucher à `.wr-card` globalement ni cumuler avec le
   margin-bottom déjà porté par `.wr-stats`.
   ══════════════════════════════════════════════════════════════════════ */
[data-panel="dashboard"] > section + section {
  margin-top: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE DEVISE — page premium (wr-cur)
   ══════════════════════════════════════════════════════════════════════ */
.wr-cur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.wr-cur__label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--wr-muted, #6B7280);
}
.wr-cur__opts {
  display: inline-flex; gap: 2px;
  background: var(--wr-violet-softer, #F3EEFB);
  border-radius: 999px; padding: 3px;
}
.wr-cur__opt {
  border: 0; background: transparent; cursor: pointer;
  border-radius: 999px; padding: 6px 12px;
  font-size: 13px; font-weight: 700; color: var(--wr-violet-dark, #5B3E8E);
  transition: background .12s ease, color .12s ease;
}
.wr-cur__opt:hover { background: rgba(255,255,255,.6); }
.wr-cur__opt.is-active {
  background: #fff; color: var(--wr-ink, #1E1B2E);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════════════════════
   MESSAGERIE RÉDUCTIBLE EN BULLE — libère de la place en un clic
   ══════════════════════════════════════════════════════════════════════ */

/* Bouton « réduire » en haut du rail. */
.wr-rail__collapse {
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 9px;
  background: #fff;
  color: var(--wr-muted, #6B7280);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  z-index: 2;
}
.wr-rail__collapse:hover {
  background: var(--wr-violet-softer, #F3EEFB);
  color: var(--wr-violet, #8A63C1);
  border-color: var(--wr-violet-2, #E4D9F5);
}

/* Le rail reste `sticky` (défini plus haut) : sticky établit déjà un contexte
   de positionnement pour le bouton collapse en absolute. Pas besoin de le
   repasser en `relative` — ça cassait le sticky et désalignait le rail par
   rapport à la sidebar de gauche. */

/* Mode reduit du rail : voir wr-shell.css (`.wr-shell--rail-collapsed`).
   Il n'y a plus de colonne a redimensionner — le rail sort du flux et sa
   gouttiere part avec lui. */

/* La bulle flottante (rouvre la messagerie). */
.wr-rail-bubble {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  /* Cachée par défaut (grand écran, rail visible). Le JS la passe en `grid`
     quand on réduit manuellement ; les media queries la montrent quand le
     responsive masque le rail. `place-items` ne s'applique qu'une fois en grid. */
  display: none;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--wr-violet, #8A63C1);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(124, 58, 173, .38);
  transition: transform .14s ease, box-shadow .14s ease;
  z-index: 60;
}
.wr-rail-bubble:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 32px rgba(124, 58, 173, .46); }
.wr-rail-bubble__badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  color: #fff; background: #EF4444;
  border: 2px solid #fff;
  border-radius: 999px;
}

/* Sous 1280px, le rail se masque automatiquement → on MONTRE la bulle (elle
   devient le seul accès aux conversations). Le bouton « réduire », lui, n'a
   plus de sens (le rail n'est plus là pour être réduit). */
@media (max-width: 1280px) {
  .wr-rail__collapse { display: none !important; }
  .wr-rail-bubble { display: grid !important; }
}

/* Sous 991px, l'espace est vraiment contraint (mobile) : le drawer/menu prend
   le relais, on retire la bulle pour ne pas encombrer. */
@media (max-width: 991px) {
  .wr-rail-bubble { display: none !important; }
}

/* Filtre « Filtrer par ville » (select inline). */
.wr-filters__city {
  min-width: 200px;
  max-width: 280px;
  padding: 8px 12px;
  font-size: 14px;
}
.wr-filters__chips--standalone {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL « LIENS EXTERNES » — mêmes identifiants
   ══════════════════════════════════════════════════════════════════════ */
.wr-extmodal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wr-extmodal[hidden] { display: none; }
.wr-extmodal__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 46, .5); }
.wr-extmodal__box {
  position: relative;
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 20px;
  padding: 30px 28px 26px;
  box-shadow: 0 24px 60px rgba(30, 27, 46, .28);
  text-align: center;
  animation: wrExtIn .18s ease;
}
@keyframes wrExtIn { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
.wr-extmodal__x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 9px; border: none;
  background: #F1F3F7; color: var(--wr-muted, #6B7280);
  display: grid; place-items: center; cursor: pointer;
}
.wr-extmodal__x:hover { background: #E9EDF3; }
.wr-extmodal__icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 16px;
  background: var(--wr-violet-softer, #F3EEFB); color: var(--wr-violet, #8A63C1);
}
.wr-extmodal__title { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--wr-ink, #1E1B2E); }
.wr-extmodal__text { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--wr-muted, #6B7280); }
.wr-extmodal__actions { display: flex; gap: 10px; }
.wr-extmodal__actions .wr-btn { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════
   POPUP « TÉLÉCHARGER L'APP » — mobile
   ══════════════════════════════════════════════════════════════════════ */
.wr-appbanner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 350;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(30, 27, 46, .22);
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon body"
    "cta cta"
    "dismiss dismiss";
  gap: 12px 14px;
  align-items: center;
  /* État masqué : glissé vers le bas. Le JS ajoute .is-visible. */
  transform: translateY(140%);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.wr-appbanner[hidden] { display: none !important; }
.wr-appbanner.is-visible { transform: translateY(0); opacity: 1; }

.wr-appbanner__x {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: #F1F3F7; color: var(--wr-muted, #6B7280);
  display: grid; place-items: center; cursor: pointer;
}
.wr-appbanner__icon {
  grid-area: icon;
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--wr-violet-softer, #F3EEFB); color: var(--wr-violet, #8A63C1);
}
.wr-appbanner__body { grid-area: body; min-width: 0; padding-right: 24px; }
.wr-appbanner__title { font-size: 15px; font-weight: 800; color: var(--wr-ink, #1E1B2E); line-height: 1.25; }
.wr-appbanner__text { font-size: 13px; color: var(--wr-muted, #6B7280); line-height: 1.45; margin-top: 3px; }

.wr-appbanner__cta {
  grid-area: cta;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--wr-ink, #1E1B2E); color: #fff;
  padding: 13px 18px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700;
  text-decoration: none;
}
.wr-appbanner__cta:active { opacity: .9; }

.wr-appbanner__dismiss {
  grid-area: dismiss;
  background: none; border: none;
  font-size: 13px; font-weight: 600; color: var(--wr-muted-2, #9CA3AF);
  cursor: pointer; padding: 4px;
}

/* Sécurité : jamais sur grand écran, même si le JS se trompe. */
@media (min-width: 768px) {
  .wr-appbanner { display: none !important; }
}

/* Les variantes de coquille — `--full` (pleine largeur), `--no-rail`
   (visiteur anonyme) et `--rail-collapsed` (messagerie reduite) — sont
   definies dans wr-shell.css. Elles se disputaient ici la meme propriete
   `grid-template-columns` a specificite egale : c'est l'ordre du fichier
   qui tranchait, donc personne ne controlait le resultat. */

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD RECRUTEUR — amorce de publication d'offre

   Placée entre les statistiques et l'abonnement. Le fond légèrement teinté
   la distingue des cards blanches sans en faire une publicité : c'est une
   action, pas une réclame.
   ══════════════════════════════════════════════════════════════════════ */
.wr-postjob {
  background: linear-gradient(135deg, #FBF9FE, #F6F2FC);
  border: 1px solid var(--wr-violet-2, #E9E1F6);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.wr-postjob__badge {
  display: inline-block;
  background: #ECFDF5; color: #047857;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
}
.wr-postjob__sub {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.55;
  color: var(--wr-muted, #6B7280);
}
.wr-postjob__line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 700px) {
  .wr-postjob__line { grid-template-columns: 1fr; }
  .wr-postjob__line .wr-btn { width: 100%; }
}
.wr-postjob__note { margin: 8px 0 0; font-size: 12px; color: var(--wr-muted, #6B7280); }

/* ── État verrouillé : pas encore de fiche entreprise ──

   La carte reste visible et garde son fond : la publier reste possible, il
   manque juste une étape. La griser entièrement laisserait croire que la
   fonctionnalité est réservée, alors qu'elle est gratuite.

   Seul le fond du bloc de déblocage change, pour signaler qu'on n'est pas
   dans le parcours nominal. */
.wr-postjob.is-locked {
  background: linear-gradient(135deg, #FDFCFE, #F9F7FC);
}

.wr-postjob__lock {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 12px;
}

.wr-postjob__lock > svg {
  width: 22px; height: 22px;
  color: var(--wr-violet, #8A63C1);
}

.wr-postjob__lock strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
  margin-bottom: 2px;
}

.wr-postjob__lock p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wr-muted, #6B7280);
}

/* Sur mobile, l'icône et le bouton passent à la ligne : trois colonnes sur
   380 px écraseraient le texte à deux mots par ligne. */
@media (max-width: 620px) {
  .wr-postjob__lock {
    grid-template-columns: 22px minmax(0, 1fr);
  }
  .wr-postjob__lock .wr-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ── Étiquette « free » dans la sidebar ──
   Sur « Poster une mission » et « Poster une annonce » : la gratuité est
   l'argument, autant qu'elle se lise sans cliquer. Gris neutre, discret :
   c'est une précision, pas une promotion. */
.wr-side__tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wr-muted, #6B7280);
  background: #F1F3F7;
  border: 1px solid #E5E9F0;
  border-radius: 100px;
  padding: 2px 7px;
  line-height: 1.5;
  flex: none;
}
/* Quand une icône « lien externe » suit l'étiquette, c'est l'étiquette qui
   pousse : l'icône reprend sa place naturelle juste après. */
.wr-side__tag + .wr-side__ext { margin-left: 6px; }
/* Premium+ (Base de candidats) : l'étiquette du compte, en couleur — c'est
   un accès ouvert à ce compte, pas une précision. */
.wr-side__tag--plus { color: #fff; background: var(--wr-violet, #8A63C1); border-color: var(--wr-violet, #8A63C1); text-transform: none; letter-spacing: 0; }

/* ── Bloc d'abonnement premium, dans le tableau de bord ──
   Remplace une page dédiée : le recruteur souscrit sans quitter son espace. */
.wr-premium-buy {
  background: #FBFAFE; border: 1px solid var(--wr-violet-2, #E4D9F5);
  border-radius: 14px; padding: 18px;
}
.wr-premium-buy__price { display: flex; align-items: baseline; gap: 6px; justify-content: center; margin-bottom: 14px; }
.wr-premium-buy__value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--wr-ink, #1E1B2E); }
.wr-premium-buy__per { font-size: 13px; color: var(--wr-muted, #6B7280); }
.wr-premium-buy__cur { display: block; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   FICHE CANDIDAT — modal à onglets
   ══════════════════════════════════════════════════════════════════════ */
.wr-cmodal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.wr-cmodal[hidden] { display: none; }
.wr-cmodal__backdrop { position: absolute; inset: 0; background: rgba(30, 27, 46, .55); backdrop-filter: blur(2px); }
.wr-cmodal__box {
  position: relative; width: 100%; max-width: 820px; max-height: 90vh;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(30, 27, 46, .28);
  display: flex; flex-direction: column; overflow: hidden;
}

/* En-tête */
.wr-cmodal__head { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--wr-line, #EEF1F7); }
.wr-cmodal__ident { min-width: 0; flex: 1; }
.wr-cmodal__ident h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--wr-ink, #1E1B2E); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-cmodal__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--wr-violet, #8A63C1); }
.wr-cmodal__x { width: 32px; height: 32px; border-radius: 8px; border: none; background: #F1F3F7; color: var(--wr-muted, #6B7280); display: grid; place-items: center; cursor: pointer; flex: none; }

/* Onglets */
.wr-cmodal__tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--wr-line, #EEF1F7); }
.wr-cmodal__tab {
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 11px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--wr-muted, #6B7280); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.wr-cmodal__tab:hover { color: var(--wr-ink, #1E1B2E); }
.wr-cmodal__tab.is-active { color: var(--wr-violet, #8A63C1); border-bottom-color: var(--wr-violet, #8A63C1); }

/* Corps */
.wr-cmodal__body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.wr-cmodal__loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px 0; color: var(--wr-muted, #6B7280); font-size: 13.5px; }
.wr-cmodal__error { padding: 30px 0; text-align: center; color: #B91C1C; font-size: 13.5px; }

.wr-cmodal__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wr-cmodal__fact { font-size: 12.5px; color: var(--wr-ink-2, #4B5563); background: #F7F8FC; border-radius: 100px; padding: 4px 11px; }

.wr-cmodal__block { margin-bottom: 20px; }
.wr-cmodal__h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wr-muted, #6B7280); }
.wr-cmodal__text { margin: 0; font-size: 14px; line-height: 1.65; color: var(--wr-ink-2, #4B5563); white-space: pre-line; }

.wr-cmodal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-cmodal__chip { font-size: 12.5px; font-weight: 600; color: var(--wr-violet-d, #6B47A6); background: var(--wr-violet-softer, #F3EEFB); border-radius: 8px; padding: 4px 10px; }
.wr-cmodal__chip--warn { color: #B45309; background: #FEF3C7; }
.wr-cmodal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }

/* ── L'analyse IA, en blocs lisibles ────────────────────────────────── */
.wr-cmodal__iah { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wr-muted); }
.wr-cmodal__iameta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: var(--wr-ink-2); }
.wr-cmodal__iaquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--wr-violet); background: var(--wr-violet-softer); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.55; color: var(--wr-ink-2); }
.wr-cmodal__ialist { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--wr-ink-2); }
.wr-cmodal__ialist li + li { margin-top: 4px; }
.wr-cmodal__score { display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--wr-ink-2); }
.wr-cmodal__scorebar { display: block; height: 6px; border-radius: 6px; background: var(--wr-bg-2); overflow: hidden; }
.wr-cmodal__scorebar span { display: block; height: 100%; background: var(--wr-violet); border-radius: 6px; }
.wr-cmodal__scorelbl { color: var(--wr-muted); }
.wr-cmodal__scoreval { text-align: right; font-weight: 700; color: var(--wr-ink); }

/* La même lecture sur la fiche (`wr-ia`) : mêmes règles, autre préfixe. */
.wr-ia__text { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--wr-ink-2); }
.wr-ia__h { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wr-muted); }
.wr-ia__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: var(--wr-ink-2); }
.wr-ia__quote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--wr-violet); background: var(--wr-violet-softer); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.55; color: var(--wr-ink-2); }
.wr-ia__list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--wr-ink-2); }
.wr-ia__list li + li { margin-top: 4px; }
.wr-ia__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.wr-ia__chip { font-size: 12.5px; font-weight: 600; color: var(--wr-violet-d, #6B47A6); background: var(--wr-violet-softer, #F3EEFB); border-radius: 8px; padding: 4px 10px; }
.wr-ia__chip--warn { color: #B45309; background: #FEF3C7; }
.wr-ia__score { display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--wr-ink-2); }
.wr-ia__scorebar { display: block; height: 6px; border-radius: 6px; background: var(--wr-bg-2); overflow: hidden; }
.wr-ia__scorebar span { display: block; height: 100%; background: var(--wr-violet); border-radius: 6px; }
.wr-ia__scorelbl { color: var(--wr-muted); }
.wr-ia__scoreval { text-align: right; font-weight: 700; color: var(--wr-ink); }

.wr-cmodal__links { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-cmodal__link { font-size: 13px; font-weight: 600; color: var(--wr-violet, #8A63C1); text-decoration: none; border: 1px solid var(--wr-violet-2, #E4D9F5); border-radius: 8px; padding: 6px 12px; }
.wr-cmodal__link:hover { background: var(--wr-violet-softer, #F3EEFB); }

/* Onglet CV */
.wr-cmodal__cvwrap { min-height: 420px; }
.wr-cmodal__cv { width: 100%; height: 60vh; min-height: 420px; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 10px; }
.wr-cmodal__nocv { text-align: center; padding: 40px 0; color: var(--wr-muted, #6B7280); font-size: 13.5px; }

/* Onglet analyse IA */
.wr-cmodal__ia p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--wr-ink-2, #4B5563); }

/* Pied */
.wr-cmodal__foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--wr-line, #EEF1F7); background: #FBFCFE; }
.wr-cmodal__likeform { margin-right: auto; }

/* La rangée devient cliquable */
.wr-row--clickable { cursor: pointer; }
.wr-row--clickable:hover { background: #FAFBFE; }

@media (max-width: 700px) {
  .wr-cmodal { padding: 0; }
  .wr-cmodal__box { max-height: 100vh; height: 100vh; border-radius: 0; max-width: 100%; }
  .wr-cmodal__foot { flex-wrap: wrap; }
  .wr-cmodal__likeform { margin-right: 0; width: 100%; }
}

/* ── Filtres de la liste de candidats (côté client) ── */
.wr-cfilters {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px; margin-bottom: 18px;
  background: #FBFCFE; border: 1px solid var(--wr-line, #EEF1F7); border-radius: 12px;
}
.wr-cfilters[hidden] { display: none; }
.wr-cfilters__label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wr-muted, #6B7280); margin-right: 2px;
}
.wr-cfilters__input, .wr-cfilters__select {
  font-family: inherit; font-size: 13px; color: var(--wr-ink, #1E1B2E);
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 8px; padding: 7px 10px;
}
.wr-cfilters__input { min-width: 170px; }
.wr-cfilters__select { cursor: pointer; }
.wr-cfilters__input:focus, .wr-cfilters__select:focus {
  outline: none; border-color: var(--wr-violet, #8A63C1);
}
.wr-cfilters__check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--wr-ink-2, #4B5563); cursor: pointer;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 8px; padding: 7px 11px;
}
.wr-cfilters__reset {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--wr-violet, #8A63C1);
  text-decoration: underline; padding: 4px;
}
.wr-cfilters__count { margin-left: auto; font-size: 12.5px; color: var(--wr-muted, #6B7280); }
.wr-cfilters__empty { padding: 28px 8px; text-align: center; color: var(--wr-muted, #6B7280); font-size: 13.5px; }

@media (max-width: 700px) {
  .wr-cfilters__input, .wr-cfilters__select { flex: 1 1 100%; min-width: 0; }
  .wr-cfilters__count { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   VIVIER EN COLONNES — board candidats

   ⚠️  UNE RÈGLE `.wr-cboard` EN `grid` VIVAIT ICI, SANS EFFET.

       Elle était intégralement écrasée par celle en `flex` déclarée
       quelques lignes plus bas — même sélecteur, même spécificité, la
       dernière gagne. Deux définitions concurrentes du même bloc, dont une
       morte : on corrigeait l'une en croyant corriger l'autre. Retirée.
       La mise en page du tableau est plus bas, et à un seul endroit.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LE VIVIER — colonnes, cartes, fiche

   Porté de la maquette 14. Les couleurs passent par les variables du design
   system : la maquette utilisait #8A63C1, #1E1B2E, #EEF1F7 — soit exactement
   --wr-violet, --wr-ink et --wr-line.

   ── LE DÉFILEMENT ────────────────────────────────────────────────────────

   Sur grand écran, les colonnes tiennent côte à côte. En dessous, elles
   défilent horizontalement avec accrochage : c'est le comportement attendu
   d'un tableau Trello, et il évite d'empiler cinq colonnes sur trois écrans
   de hauteur.
   ══════════════════════════════════════════════════════════════════════════ */

/* La maquette pose des colonnes de largeur FIXE (264 px) qui défilent, pas
   une grille élastique. La nuance compte : avec `1fr`, trois colonnes
   s'étalent sur toute la largeur et le tableau ne ressemble plus à un
   Trello — il ressemble à trois panneaux côte à côte. */
.wr-cboard {
  display: flex;
  /* ⚠️  `stretch`, PAS `flex-start`.

     C'est cette ligne qui permet aux colonnes de faire toute la hauteur du
     tableau. Avec `flex-start`, chacune s'arrête à sa dernière carte : une
     colonne vide devient une cible de dépôt de 80 px au milieu d'un tableau
     plein écran, et les fonds de colonnes dessinent un escalier. */
  align-items: stretch;
  gap: 14px;
  padding: 8px 32px 32px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.wr-cboard > .wr-ccol {
  flex: 0 0 var(--wr-ccol-w, 300px);
}

/* ══════════════════════════════════════════════════════════════════════════
   LE TABLEAU OCCUPE LA HAUTEUR DE LA FENÊTRE

   ⚠️  UNE SEULE HAUTEUR EST FIXÉE : CELLE DU CADRE DE LA PAGE.

       Tout le reste en dérive par `flex: 1`. Poser une hauteur sur chaque
       niveau (panneau, cadre, tableau, colonne) marcherait un temps, puis
       la première marge ajoutée quelque part ferait déborder le bas du
       tableau sous la fenêtre — sans que rien n'indique lequel des cinq
       calculs est faux.

   ⚠️  `min-height: 0` SUR CHAQUE MAILLON, ET CE N'EST PAS DÉCORATIF.

       Un enfant de flex vaut par défaut `min-height: auto` : il refuse de
       devenir plus petit que son contenu. Sans ces déclarations, une
       colonne de trente cartes pousse le tableau, qui pousse le cadre, qui
       dépasse la hauteur qu'on vient de lui donner — et rien ne défile.
       C'est l'erreur classique des mises en page plein écran, et elle ne
       se voit qu'avec beaucoup de données.

   ⚠️  `100dvh`, PAS `100vh`.

       Sur mobile, `vh` compte la barre d'adresse comme si elle n'existait
       pas : le bas du tableau — donc le champ « Ajouter une note » — passe
       sous le bord de l'écran. `dvh` suit la hauteur réellement visible.
       La ligne `vh` reste au-dessus pour les navigateurs qui ignorent
       `dvh` : ils gardent l'ancien comportement, pas une page cassée.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-dash--board {
  /* Ce qu'on retire de la fenêtre : l'en-tête du site (--wr-shell-top) et
     une respiration sous le tableau. */
  --wr-board-gap: 24px;

  height: calc(100vh - var(--wr-shell-top, 92px) - var(--wr-board-gap));
  height: calc(100dvh - var(--wr-shell-top, 92px) - var(--wr-board-gap));

  /* Plancher : sous cette hauteur, le tableau redevient une page qui
     défile. Un écran de 500 px de haut ne peut pas contenir un en-tête,
     des onglets, une barre de titre et des cartes lisibles — le forcer
     donnerait des colonnes de trois centimètres. */
  min-height: 560px;
}

/* ⚠️  `align-self: stretch` — SANS LUI, LA HAUTEUR NE DESCEND PAS.

   `.wr-dash` est une grille en `align-items: start` : ses enfants gardent
   leur hauteur naturelle au lieu de remplir la rangée. La colonne
   principale s'arrêtait donc à la hauteur de son contenu, et les `flex: 1`
   en dessous n'avaient rien à se partager — le cadre restait petit, la
   hauteur posée plus haut semblait ignorée.

   On force la seule colonne concernée. Poser `align-items: stretch` sur la
   grille entière étirerait aussi le rail de droite, qui est `sticky` : il
   ferait toute la hauteur de la rangée et cesserait de coller. */
.wr-dash--board > .wr-dash__main {
  align-self: stretch;
  min-height: 0;
}

/* Les onglets et la barre de rendez-vous gardent leur hauteur ; seul le
   panneau du tableau absorbe ce qui reste. */
.wr-dash--board .wr-tabs,
.wr-dash--board .wr-rdvbar { flex: none; }

.wr-dash--board [data-panel="vivier"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wr-dash--board .wr-cbframe {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wr-dash--board .wr-cbhead { flex: none; }

.wr-dash--board .wr-cboard {
  flex: 1 1 auto;
  min-height: 0;
  /* Le tableau ne défile plus verticalement : ce sont les colonnes qui le
     font, chacune de son côté. */
  overflow-y: hidden;
}

/* La colonne se découpe en trois : l'en-tête, le corps qui défile, le champ
   d'ajout. Les deux extrémités restent visibles quelle que soit la longueur
   de la liste — c'est tout l'intérêt d'un tableau plein écran. */
.wr-dash--board .wr-ccol { min-height: 0; }

.wr-dash--board .wr-ccol__head,
.wr-dash--board .wr-ccol__add { flex: none; }

.wr-dash--board .wr-ccol__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.wr-dash--board .wr-ccol__body::-webkit-scrollbar { width: 7px; }
.wr-dash--board .wr-ccol__body::-webkit-scrollbar-track { background: transparent; }
.wr-dash--board .wr-ccol__body::-webkit-scrollbar-thumb {
  background: var(--wr-line-2, #E5E9F0);
  border-radius: var(--wr-r-pill, 100px);
}

/* ══════════════════════════════════════════════════════════════════════════
   DENSITÉ — trois réglages, un seul bouton

   La classe est posée sur le CADRE, pas sur le tableau : l'en-tête (le
   bouton lui-même) doit pouvoir refléter l'état courant, et il est en
   dehors du tableau.

     confort  colonnes de 300 px, une carte par ligne — le défaut
     compact  mêmes colonnes, cartes resserrées : ~40 % de cartes en plus
     dense    colonnes élargies, DEUX cartes par ligne

   ⚠️  « Deux cartes par ligne » EXIGE D'ÉLARGIR LA COLONNE.

       Deux cartes dans 300 px, ce sont deux cartes de 140 px : le nom passe
       à la ligne, l'avatar touche le texte, et le gain de place est perdu
       en hauteur. La colonne passe donc à 460 px dans ce mode — on voit
       moins de colonnes à la fois, mais deux fois plus de candidats par
       colonne, ce qui est précisément le compromis demandé.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Les flèches de navigation, à côté du titre ─────────────────────────── */
.wr-cbhead__titlerow { display: flex; align-items: center; gap: 12px; }

.wr-cbnav { display: inline-flex; gap: 4px; }

.wr-cbnav__btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 999px;
  background: #fff;
  color: var(--wr-ink, #1E1B2E);
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}

.wr-cbnav__btn svg { width: 16px; height: 16px; }
.wr-cbnav__btn:hover { border-color: var(--wr-violet, #8A63C1); background: var(--wr-violet-soft, #F2EDFA); }
.wr-cbnav__btn:disabled { opacity: .35; cursor: default; background: #fff; border-color: var(--wr-line, #EEF1F7); }

/* ── Le tableau se saisit à la souris ───────────────────────────────────── */
.wr-cboard { cursor: grab; }
.wr-cboard.is-grabbing { cursor: grabbing; user-select: none; scroll-snap-type: none; scroll-behavior: auto; }
.wr-cboard .wr-ccol__body, .wr-cboard .wr-ccard { cursor: default; }
.wr-cboard .wr-ccard[draggable="true"] { cursor: grab; }

/* ── « + Ajouter une note » : un bouton, plus un champ ──────────────────── */
.wr-ccol__addbtn {
  width: 100%;
  text-align: left;
  border: 1px dashed var(--wr-line, #EEF1F7);
  border-radius: 10px;
  background: transparent;
  color: var(--wr-muted, #6B7280);
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.wr-ccol__addbtn:hover { border-color: var(--wr-violet, #8A63C1); color: var(--wr-violet, #8A63C1); background: var(--wr-violet-soft, #F2EDFA); }

.wr-cbframe.is-density-compact .wr-ccard { padding: 9px 10px; }
.wr-cbframe.is-density-compact .wr-ccol__body { gap: 7px; }
.wr-cbframe.is-density-compact .wr-ccard__av { width: 30px; height: 30px; font-size: 11px; }
.wr-cbframe.is-density-compact .wr-ccard__note { display: none; }
.wr-cbframe.is-density-compact .wr-ccard__tags { display: none; }

.wr-cbframe.is-density-dense {
  --wr-ccol-w: 460px;
}

.wr-cbframe.is-density-dense .wr-ccol__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

/* La zone de dépôt d'une colonne vide et le message qui l'accompagne
   occupent la largeur entière : cadrés dans une demi-colonne, ils
   deviennent une cible étroite au milieu du vide. */
.wr-cbframe.is-density-dense .wr-ccol__empty { grid-column: 1 / -1; }

.wr-cbframe.is-density-dense .wr-ccard { padding: 10px; }
.wr-cbframe.is-density-dense .wr-ccard__av { width: 30px; height: 30px; font-size: 11px; }
.wr-cbframe.is-density-dense .wr-ccard__note { display: none; }

/* Sous 900 px, une colonne de 460 px ne tient plus : le mode dense
   retombe sur une carte par ligne, sans que l'utilisateur ait à changer de
   réglage — son choix est conservé pour le jour où il repasse sur grand
   écran. */
@media (max-width: 900px) {
  .wr-cbframe.is-density-dense {
    --wr-ccol-w: 300px;
  }

  .wr-cbframe.is-density-dense .wr-ccol__body {
    display: flex;
    flex-direction: column;
  }
}

/* ── Le bouton de densité ──────────────────────────────────────────────── */

.wr-cbdensity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wr-ink-2, #374151);
  background: var(--wr-card, #FFFFFF);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-sm, 10px);
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color var(--wr-t, .15s) ease, color var(--wr-t, .15s) ease;
}

.wr-cbdensity:hover {
  border-color: var(--wr-violet-2, #A98AD3);
  color: var(--wr-violet, #8A63C1);
}

.wr-cbdensity:focus-visible {
  outline: 2px solid var(--wr-violet, #8A63C1);
  outline-offset: 2px;
}

.wr-cbdensity svg { width: 15px; height: 15px; flex: none; }

/* Les trois barres de l'icône se resserrent avec la densité : l'état se lit
   sans avoir à déplier le libellé, qui disparaît sur petit écran. */
.wr-cbdensity__label { white-space: nowrap; }

/* La barre de défilement discrète : visible pour signaler qu'il y a plus à
   voir, sans occuper l'espace d'une barre système. */
.wr-cboard::-webkit-scrollbar { height: 8px; }
.wr-cboard::-webkit-scrollbar-track { background: transparent; }
.wr-cboard::-webkit-scrollbar-thumb {
  background: var(--wr-line-2, #E5E9F0);
  border-radius: 100px;
}

@media (max-width: 991px) {
  .wr-cbhead { padding: 18px 18px 14px; }
  .wr-cboard { padding: 8px 18px 22px; }
}

@media (max-width: 640px) {
  .wr-cbhead {
    padding: 16px 14px 12px;
    align-items: flex-start;
  }

  .wr-cbhead__title { font-size: 21px; }

  .wr-cboard {
    gap: 10px;
    padding: 8px 14px 14px;

    /* ══════════════════════════════════════════════════════════════════
       UNE COLONNE À LA FOIS

       ⚠️  `mandatory`, PAS `proximity`.

           `proximity` laisse le navigateur juger si le geste « méritait »
           un accrochage : sur un petit balayage, il repose la vue entre
           deux colonnes, et l'on travaille avec deux moitiés de colonnes à
           l'écran. `mandatory` garantit qu'on atterrit toujours SUR une
           colonne — c'est ce qui rend les pastilles fiables, puisqu'elles
           annoncent la colonne courante.

       ⚠️  `scroll-padding-left` REPREND LE PADDING DU TABLEAU.

           Sans lui, l'accrochage aligne la colonne sur le bord du bloc, et
           les 14 px de marge intérieure rognent la première carte de
           chaque colonne.
       ══════════════════════════════════════════════════════════════════ */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
  }

  /* Pleine largeur : un moignon de la colonne suivante n'est ni lisible ni
     cliquable, et il fait croire à un défilement raté. Avec les pastilles
     sous le tableau, savoir qu'il y a une suite ne dépend plus de ce
     moignon. */
  .wr-cboard > .wr-ccol {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* La colonne de création reste étroite : elle n'a pas de contenu à
     montrer, et lui donner un écran entier obligerait à balayer une page
     vide pour revenir. */
  .wr-cboard > .wr-ccol--new {
    flex: 0 0 82%;
  }

  /* Le réglage de densité n'a pas de sens quand une seule colonne tient à
     l'écran : deux cartes par ligne y seraient illisibles. Le bouton
     disparaît, le choix reste enregistré pour le retour sur grand écran. */
  .wr-cbdensity { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LES PASTILLES DE COLONNE (mobile)

   ⚠️  RENDUES PAR LE SERVEUR, PAS PAR LE SCRIPT.

       Ce sont de vrais boutons présents dans le HTML : sans JavaScript, ils
       ne défilent pas mais ils affichent la liste des colonnes et leur
       compte, ce qui reste une information. Un composant entièrement
       fabriqué en JS aurait laissé un vide.

   Masquées au-dessus de 640 px : le défilement horizontal y montre
   plusieurs colonnes à la fois, une pastille « colonne courante » n'y veut
   rien dire.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cbdots { display: none; }

@media (max-width: 640px) {
  .wr-cbdots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 0 14px 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wr-cbdots::-webkit-scrollbar { display: none; }

  .wr-cbdot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--wr-muted, #6B7280);
    background: var(--wr-bg-2, #F4F6FB);
    border: 1px solid transparent;
    border-radius: var(--wr-r-pill, 100px);
    padding: 6px 11px;
    cursor: pointer;
    transition: color var(--wr-t, .15s) ease, background var(--wr-t, .15s) ease;
  }

  .wr-cbdot__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wr-violet, #8A63C1);
    flex: none;
  }

  .wr-cbdot__n {
    font-size: 11px;
    font-weight: 700;
    color: var(--wr-muted-2, #9CA3AF);
  }

  /* La colonne affichée : contrastée, pas seulement teintée. Sur un
     téléphone au soleil, une nuance de gris ne se distingue pas. */
  .wr-cbdot.is-active {
    color: var(--wr-violet, #8A63C1);
    background: var(--wr-violet-soft, #F2EDFA);
    border-color: var(--wr-violet-2, #A98AD3);
  }

  .wr-cbdot.is-active .wr-cbdot__n { color: var(--wr-violet, #8A63C1); }

  .wr-cbdot:focus-visible {
    outline: 2px solid var(--wr-violet, #8A63C1);
    outline-offset: 2px;
  }
}

/* Sur mobile, la hauteur disponible est plus courte et chaque pixel compte :
   on rend au tableau la respiration prévue pour le bas de page. */
@media (max-width: 640px) {
  .wr-dash--board { --wr-board-gap: 12px; }
}

/* ── Une colonne ────────────────────────────────────────────────────────── */

.wr-ccol {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--wr-bg-2, #F6F7FA);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 14px;
  transition: border-color .14s ease, background .14s ease;
}

.wr-ccol.is-over {
  border-color: var(--wr-violet, #8A63C1);
  background: #FBFAFE;
}

.wr-ccol__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 13px 9px;
}

/* La pastille de couleur : c'est le seul repère visuel qui distingue les
   colonnes au premier coup d'œil quand elles défilent. */
.wr-ccol__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wr-violet, #8A63C1);
  flex: none;
}

.wr-ccol__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
  letter-spacing: -.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-ccol__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--wr-muted, #6B7280);
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 100px;
  padding: 2px 8px;
  flex: none;
}

.wr-ccol__menu {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--wr-muted-2, #9CA3AF);
  cursor: pointer;
  flex: none;
}

.wr-ccol__menu:hover { background: #fff; }

.wr-ccol__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 11px 11px;
  min-height: 80px;
}

/* ── Une carte ──────────────────────────────────────────────────────────── */

.wr-ccard {
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(30, 27, 46, .05);
  cursor: grab;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}

.wr-ccard:hover {
  border-color: var(--wr-violet-2, #E4D9F5);
  box-shadow: 0 4px 14px rgba(30, 27, 46, .08);
}

.wr-ccard.is-dragging {
  opacity: .5;
  cursor: grabbing;
  transform: rotate(1.5deg);
}

.wr-ccard__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.wr-ccard__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  flex: none;
  background: var(--wr-violet-l, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
}

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

.wr-ccard__name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wr-ccard__role {
  display: block;
  font-size: 11px;
  color: var(--wr-muted, #6B7280);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Le score ───────────────────────────────────────────────────────────── */

/* Trois paliers de couleur. La nuance compte : un score de 40 % affiché en
   rouge vif suggérerait un mauvais candidat, alors qu'il signifie surtout
   « peu d'information en commun ». Le gris reste neutre. */
.wr-ccard__match {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 100px;
  flex: none;
  letter-spacing: -.01em;
}

.wr-ccard__match--high { background: #D1FAE5; color: #047857; }
.wr-ccard__match--mid  { background: #FEF3C7; color: #92400E; }
.wr-ccard__match--low  { background: var(--wr-bg-2, #F6F7FA); color: var(--wr-muted, #6B7280); }

/* ── Note et étiquettes ─────────────────────────────────────────────────── */

/* La note complète, sans troncature. Elle contient du HTML : les styles
   ci-dessous encadrent ce que l'éditeur enrichi peut produire. */
.wr-ccard__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--wr-ink-2, #374151);
  background: #F8F4FD;
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 8px;
  word-break: break-word;
}

.wr-ccard__note p { margin: 0 0 6px; }
.wr-ccard__note p:last-child { margin-bottom: 0; }
.wr-ccard__note ul,
.wr-ccard__note ol { margin: 0 0 6px; padding-left: 18px; }
.wr-ccard__note li { margin-bottom: 2px; }
.wr-ccard__note strong { color: var(--wr-ink, #1E1B2E); }

.wr-ccard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.wr-ctag {
  background: var(--wr-violet-l, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-ccard__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}

.wr-ccard__meta {
  font-size: 10.5px;
  color: var(--wr-muted-2, #9CA3AF);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les flèches de déplacement : indispensables au clavier et au tactile, où
   le glisser-déposer est peu fiable. */
.wr-ccard__nav {
  margin-left: auto;
  display: flex;
  gap: 3px;
  flex: none;
}

.wr-ccard__arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  border-radius: 7px;
  color: var(--wr-muted, #6B7280);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.wr-ccard__arrow:hover:not(:disabled) {
  border-color: var(--wr-violet, #8A63C1);
  color: var(--wr-violet, #8A63C1);
}

.wr-ccard__arrow:disabled {
  opacity: .35;
  cursor: default;
}

/* ── Ajout d'une carte ──────────────────────────────────────────────────── */

.wr-ccol__add { padding: 0 11px 11px; }

.wr-ccol__addinput {
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed var(--wr-line-2, #E5E9F0);
  background: transparent;
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--wr-ink, #1E1B2E);
  transition: border-color .12s ease, background .12s ease;
}

.wr-ccol__addinput::placeholder { color: var(--wr-muted-2, #9CA3AF); }

.wr-ccol__addinput:focus {
  outline: none;
  border-style: solid;
  border-color: var(--wr-violet, #8A63C1);
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   LES DEUX FORMULES, CÔTE À CÔTE

   Montrer le premium seul demandait au recruteur de deviner ce qu'il avait
   déjà. Les deux colonnes répondent à la seule question qui compte : qu'est-ce
   que je gagne en payant ?

   Le gratuit n'est pas grisé ni rétréci — c'est une formule complète, marquée
   comme celle en cours. Le premium se distingue par sa bordure et son fond,
   pas en dévalorisant l'autre.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-plans {
  margin: 0 0 24px;
}

.wr-plans__head {
  text-align: center;
  margin-bottom: 20px;
}

.wr-plans__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--wr-ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

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

/* minmax(0, 1fr) et non 1fr : sans le minimum à zéro, une carte au contenu
   large refuse de se comprimer et déborde de la grille. */
.wr-plans__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 780px) {
  .wr-plans__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Une carte ──────────────────────────────────────────────────────────── */

.wr-plan {
  display: flex;
  flex-direction: column;
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-2xl);
  padding: 22px 20px 20px;
  position: relative;
  box-sizing: border-box;
}

/* La formule payante se distingue par sa bordure, pas en écrasant l'autre. */
.wr-plan--paid {
  border: 2px solid var(--wr-violet);
  box-shadow: 0 8px 28px -12px rgba(138, 99, 193, 0.4);
}

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

.wr-plan__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--wr-r-pill);
  margin-bottom: 10px;
}

.wr-plan__badge--current {
  background: var(--wr-bg-2);
  color: var(--wr-muted);
}

.wr-plan__badge--reco {
  background: var(--wr-violet);
  color: #fff;
}

.wr-plan__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--wr-ink);
  margin: 0 0 8px;
}

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

.wr-plan__amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--wr-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.wr-plan__old {
  font-size: 17px;
  font-weight: 600;
  color: var(--wr-muted-2);
  text-decoration: line-through;
}

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

.wr-plan__text {
  font-size: 13px;
  color: var(--wr-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── La liste des avantages ─────────────────────────────────────────────── */

/* ⚠️  `align-content: start`, ET C'EST CE QUI TIENT LES PUCES ENSEMBLE.

   La liste prend la hauteur libre (`flex: 1`) pour que le bouton reste en
   bas de la carte. Mais une grille qui a de la hauteur en trop la répartit
   ENTRE ses lignes : trois puces se retrouvaient espacées de dix
   centimètres dans la carte gratuite, plus courte que la premium. Elles
   restent groupées en haut ; le vide va sous elles, au-dessus du bouton. */
.wr-plan__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 11px;
  align-content: start;
  flex: 1 1 auto;
}

.wr-plan__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  color: var(--wr-ink-2);
  line-height: 1.5;
}

.wr-plan__item strong {
  display: block;
  font-weight: 600;
  color: var(--wr-ink);
}

.wr-plan__item em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--wr-muted);
  margin-top: 1px;
}

/* Le point « tout le gratuit inclus » se détache : sans lui, on croirait que
   le premium remplace le gratuit au lieu de s'y ajouter. */
.wr-plan__item--all {
  padding-bottom: 11px;
  border-bottom: 1px dashed var(--wr-line);
}

.wr-plan__check {
  width: 16px;
  height: 16px;
  color: var(--wr-success);
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── Le pied ────────────────────────────────────────────────────────────── */

.wr-plan__foot {
  margin-top: auto;
}

/* Le sélecteur de devise du bloc « Tarifs » de l'éditeur : au-dessus des
   deux cartes, aligné à droite, pour qu'il commande visiblement les deux. */
/* ══════════════════════════════════════════════════════════════════════════
   L'EN-TÊTE DU BLOC TARIFS — titre et menu de devise sur une ligne
   ══════════════════════════════════════════════════════════════════════════ */
.wr-plans__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 8px;
}

.wr-plans__bar-title { margin: 0 !important; text-align: left !important; }

.wr-plans__bar-sub { text-align: left !important; margin: 0 0 22px !important; }

.wr-plans__cur { display: flex; margin: 0; }

@media (max-width: 640px) {
  .wr-plans__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE MENU DE DEVISE

   Un bouton qui montre la devise choisie, une liste qui s'ouvre dessous.
   Le `<select>` natif est toujours là, masqué (`.wr-visually-hidden`) : c'est
   lui que le script de bascule écoute, le menu ne fait que le piloter.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wr-curmenu { position: relative; }

.wr-curmenu__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--wr-line, #E5E7EB);
  border-radius: 999px;
  background: #fff;
  color: var(--wr-ink, #1E1B2E);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  transition: border-color .15s, box-shadow .15s;
}

.wr-curmenu__btn:hover,
.wr-curmenu__btn[aria-expanded="true"] {
  border-color: var(--wr-violet, #8A63C1);
  box-shadow: 0 0 0 3px rgba(138, 99, 193, .14);
}

.wr-curmenu__sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
  font-weight: 700;
  font-size: 13px;
}

.wr-curmenu__chev { width: 16px; height: 16px; color: var(--wr-muted, #6B7280); transition: transform .15s; }
.wr-curmenu__btn[aria-expanded="true"] .wr-curmenu__chev { transform: rotate(180deg); }

.wr-curmenu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--wr-line, #E5E7EB);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .12);
}

.wr-curmenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  color: var(--wr-ink, #1E1B2E);
}

.wr-curmenu__item:hover,
.wr-curmenu__item:focus-visible { background: var(--wr-violet-soft, #F2EDFA); outline: none; }

.wr-curmenu__item.is-active { font-weight: 700; }
.wr-curmenu__item.is-active .wr-curmenu__sym { background: var(--wr-violet, #8A63C1); color: #fff; }

.wr-curmenu__name { flex: 1 1 auto; }
.wr-curmenu__code { font-size: 12px; color: var(--wr-muted, #6B7280); letter-spacing: .04em; }

.wr-plan__cur {
  display: block;
  margin-bottom: 10px;
}

.wr-plan__cur .wr-label {
  display: block;
  margin-bottom: 4px;
}

.wr-plan__cta {
  width: 100%;
}

.wr-plan__note {
  font-size: 12px;
  color: var(--wr-muted);
  text-align: center;
  margin: 8px 0 0;
}

/* Le gratuit n'a pas de bouton : on ne propose pas d'acheter ce qu'on a déjà.
   Une mention suffit, et elle occupe la même hauteur que le bouton d'en face
   pour que les deux cartes restent alignées. */
.wr-plan__here {
  display: grid;
  place-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wr-muted);
  background: var(--wr-bg-2);
  border-radius: var(--wr-r-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR REPLIABLE

   Réduit la colonne à une bande d'icônes pour rendre l'espace au contenu.
   Utile sur les écrans de travail — le vivier, un tableau large — où 264 px
   de menu coûtent cher.

   ── POURQUOI `font-size: 0` ──────────────────────────────────────────────

   Le libellé d'un lien est un nœud texte nu, sans balise autour :

       <a class="wr-side__link"><svg…/>Accueil</a>

   Impossible de le cibler en CSS. On annule donc la taille de police sur le
   lien, et on la rétablit sur le SVG. Solution inhabituelle, mais l'autre
   option — envelopper 29 libellés dans un <span> — toucherait toute la
   sidebar pour un gain nul.

   Le texte reste dans le DOM : les lecteurs d'écran continuent de l'annoncer,
   et `title` prend le relais au survol.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le bouton lui-même. Posé par le JS (hidden retiré) : replié sans
   JavaScript, la sidebar serait un menu que rien ne peut rouvrir. */
.wr-side__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--wr-line);
  background: var(--wr-card, #fff);
  border-radius: var(--wr-r-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--wr-muted);
  cursor: pointer;
  transition: border-color var(--wr-t), color var(--wr-t);
  box-sizing: border-box;
}

.wr-side__toggle:hover {
  border-color: var(--wr-violet-2, #E4D9F5);
  color: var(--wr-violet);
}

.wr-side__toggle svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform .18s ease;
}

/* ── L'etat replie ────────────────────────────────────────────────────

   ⚠️  LA LARGEUR N'EST PLUS ICI.

   `.wr-shell.is-side-collapsed` redeclarait les trois colonnes de la
   grille (68px / 1fr / 300px). Avec une specificite de (0,2,0), elle
   ecrasait `.wr-shell--full` et `.wr-shell--no-rail` — et sur une page
   sans sidebar, le contenu se retrouvait dans la piste de 68px.

   wr-shell.css ne change plus qu'UNE variable : `--wr-side-w: 68px`.
   Aucune autre regle ne la dispute.

   Ce qui suit ne concerne plus que l'APPARENCE de la bande d'icones. */

.wr-side.is-collapsed .wr-side__card {
  padding: 8px 7px;
}

/* Les intitulés de section (« Connecté », « Découvrir ») n'ont plus de place
   et ne sont plus lisibles : on les retire de l'affichage. */
.wr-side.is-collapsed .wr-side__label,
.wr-side.is-collapsed .wr-side__tag,
.wr-side.is-collapsed .wr-side__beta,
.wr-side.is-collapsed .wr-side__ext,
.wr-side.is-collapsed .wr-side__togglelabel {
  display: none;
}

.wr-side.is-collapsed .wr-side__link {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  font-size: 0;          /* annule le libellé */
  line-height: 0;
}

/* La taille rétablie sur l'icône, sinon elle disparaîtrait avec le texte. */
.wr-side.is-collapsed .wr-side__link svg {
  width: 18px;
  height: 18px;
  font-size: 13px;
  flex: none;
}

.wr-side.is-collapsed .wr-side__toggle {
  justify-content: center;
  padding: 8px 0;
}

/* La flèche pivote : elle indiquait « replier », elle indique maintenant
   « déplier ». */
.wr-side.is-collapsed .wr-side__toggle svg {
  transform: rotate(180deg);
}

/* La pastille de notification passe en coin : centrée, elle recouvrirait
   l'icône. */
/* Repliée : le total disparaît (la pastille « nouveau » reste, en coin). */
.wr-side.is-collapsed .wr-side__count { display: none; }

.wr-side.is-collapsed .wr-side__badge,
.wr-side.is-collapsed .wr-side__dot {
  position: absolute;
  top: 4px;
  right: 6px;
  transform: none;
}

.wr-side.is-collapsed .wr-side__link {
  position: relative;
}

/* Repliée, la sidebar n'affiche plus que l'icône : le cadenas collé dessus
   (coin bas-droit) la rendait illisible — deux pictos superposés sur 18px,
   ça ne se distingue plus, ça salit juste l'icône. On le retire ; le
   libellé et le lien restent verrouillés (data-auth-open / href), seule
   l'indication visuelle disparaît en mode réduit. */
.wr-side.is-collapsed .wr-side__lock {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   LES FACETTES DISPARAISSENT EN MODE RÉDUIT

   ⚠️  ELLES NE PEUVENT PAS SE RÉDUIRE À UNE ICÔNE, CONTRAIREMENT AU RESTE.

   Tout le reste de la sidebar repliée tient parce qu'un lien se résume à son
   icône : « Accueil » devient une maison, et l'on retrouve la fonction. Les
   cartes « Filtrer par ville » et « Filtrer par métier » n'ont rien de tel —
   ce sont un intitulé, un champ de recherche et une liste de noms de villes.
   Réduites à 68 px, il ne reste qu'une colonne de texte tronqué, illisible et
   incliquable : Paris, Lyon et Strasbourg deviennent trois traits gris.

   Elles ne sont pas non plus indispensables au même titre que la navigation :
   la page qu'elles filtrent porte ses propres filtres dans son contenu (voir
   le sélecteur de ville de `pages/enterprises.ejs`). On ne perd donc aucune
   fonction en les masquant — seulement un raccourci, et c'est précisément ce
   qu'on accepte de perdre en repliant la barre.

   `display: none` plutôt qu'une largeur nulle : ce bloc contient des champs
   de saisie et des liens. Repliés à zéro, ils resteraient atteignables au
   clavier — on tabulerait dans une carte invisible.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-side.is-collapsed .wr-facets {
  display: none;
}

/* En dessous de 991 px la sidebar devient un drawer : le repli n'y a plus
   de sens, elle est déjà masquée. */
@media (max-width: 991px) {
  /* `.wr-side__toggle` (masque) et la largeur de la sidebar repliee sont
     traites dans wr-shell.css : sous 991px la sidebar est un drawer, le
     repli n'y a aucun sens. */

  /* Ceinture et bretelles : le JS retire déjà `is-collapsed` sous ce seuil,
     mais si le script ne tourne pas — erreur, blocage réseau — la classe
     pourrait persister depuis le rendu. Un drawer réduit à une bande
     d'icônes de 68 px serait inutilisable. */
  .wr-side.is-collapsed .wr-side__link {
    justify-content: flex-start;
    padding: 9px 12px;
    gap: 11px;
    font-size: 13px;
    line-height: normal;
  }

  .wr-side.is-collapsed .wr-side__label,
  .wr-side.is-collapsed .wr-side__tag,
  .wr-side.is-collapsed .wr-side__beta,
  .wr-side.is-collapsed .wr-side__ext {
    display: revert;
  }

  /* ⚠️  LES FACETTES AUSSI.

     La règle qui les masque en mode réduit doit être annulée ici, comme les
     libellés juste au-dessus. Sans cette ligne, une classe `is-collapsed`
     restée en place faute de script ferait disparaître « Filtrer par ville »
     du drawer — où la place ne manque pourtant pas, et où c'est le seul
     endroit où l'on peut filtrer sur mobile. */
  .wr-side.is-collapsed .wr-facets {
    display: revert;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIVIER — en-tête, ajout de colonne, modal d'ajout

   Complète le bloc wr-ccol/wr-ccard. Porté de la maquette 14a.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le cadre : fond, bordure, ombre. Mesures de la maquette 14a. */
.wr-cbframe {
  background: #FBFCFE;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px -24px rgba(30, 27, 46, .2);
}

.wr-cbhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 22px 32px 16px;
}

.wr-cbhead__id { flex: 1 1 260px; min-width: 0; }

.wr-cbhead__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--wr-ink, #1E1B2E);
  margin: 0;
}

.wr-cbhead__sub {
  font-size: 13px;
  line-height: 1.4;
  color: var(--wr-muted, #6B7280);
  margin: 3px 0 0;
}

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

/* Le bouton d'ajout en pilule, comme la maquette. Une règle locale plutôt
   qu'une modification de .wr-btn--primary : arrondir tous les boutons
   primaires du site pour cet écran serait disproportionné. */
.wr-cbhead__actions .wr-btn {
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
  gap: 7px;
  flex: none;
}

.wr-cbhead__actions .wr-btn svg {
  width: 14px;
  height: 14px;
}

.wr-cbfilter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 100px;      /* pilule, comme la maquette */
  width: 220px;
  transition: border-color .14s ease;
}

.wr-cbfilter:focus-within { border-color: var(--wr-violet, #8A63C1); }

.wr-cbfilter svg {
  width: 15px;
  height: 15px;
  color: var(--wr-muted-2, #9CA3AF);
  flex: none;
}

.wr-cbfilter__input {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--wr-ink, #1E1B2E);
  min-width: 0;
  width: 160px;
}

.wr-cbfilter__input:focus { outline: none; }

@media (max-width: 640px) {
  .wr-cbhead__actions { width: 100%; }
  .wr-cbfilter { flex: 1; }
  .wr-cbfilter__input { width: 100%; }
}

/* ── Colonne vide ───────────────────────────────────────────────────────── */

.wr-ccol__empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 18px 10px;
  border: 1px dashed var(--wr-line-2, #E5E9F0);
  border-radius: 10px;
  color: var(--wr-muted-2, #9CA3AF);
  font-size: 11.5px;
  text-align: center;
}

.wr-ccol__empty svg { width: 26px; height: 26px; opacity: .55; }

.wr-ccol__emptyadd {
  border: 0;
  background: transparent;
  color: var(--wr-violet, #8A63C1);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
}

.wr-ccol__emptyadd:hover { text-decoration: underline; }

/* ── Créer une colonne ──────────────────────────────────────────────────── */

.wr-ccol--new {
  background: transparent;
  border-style: dashed;
}

.wr-ccolnew { padding: 11px; }

.wr-ccolnew__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  color: var(--wr-muted, #6B7280);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.wr-ccolnew__trigger:hover {
  background: var(--wr-bg-2, #F6F7FA);
  color: var(--wr-violet, #8A63C1);
}

.wr-ccolnew__trigger svg { width: 15px; height: 15px; flex: none; }

.wr-ccolnew__form { display: grid; gap: 9px; }

.wr-ccolnew__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 9px;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--wr-ink, #1E1B2E);
}

.wr-ccolnew__input:focus {
  outline: none;
  border-color: var(--wr-violet, #8A63C1);
}

.wr-ccolnew__row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wr-ccolnew__color {
  width: 34px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL D'AJOUT AU VIVIER
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cadd {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.wr-cadd[hidden] { display: none; }

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

.wr-cadd__box {
  position: relative;
  width: min(100%, 520px);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--wr-card, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(30, 27, 46, .34);
  overflow: hidden;
}

.wr-cadd__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wr-line, #EEF1F7);
}

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

.wr-cadd__x {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  border-radius: 8px;
  color: var(--wr-muted, #6B7280);
  cursor: pointer;
  flex: none;
}

.wr-cadd__x svg { width: 15px; height: 15px; }

/* ── Les trois modes ────────────────────────────────────────────────────── */

.wr-cadd__modes {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
}

.wr-cadd__mode {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wr-muted, #6B7280);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.wr-cadd__mode.is-active {
  border-color: var(--wr-violet, #8A63C1);
  background: #F2EDFA;
  color: var(--wr-violet, #8A63C1);
}

.wr-cadd__body {
  display: grid;
  gap: 12px;
  padding: 16px 20px 20px;
  overflow-y: auto;
}

.wr-cadd__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px;
}

/* ── Recherche de profil ────────────────────────────────────────────────── */

.wr-cadd__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 10px;
}

.wr-cadd__search:focus-within { border-color: var(--wr-violet, #8A63C1); }

.wr-cadd__search svg {
  width: 15px;
  height: 15px;
  color: var(--wr-muted-2, #9CA3AF);
  flex: none;
}

.wr-cadd__searchinput {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--wr-ink, #1E1B2E);
  flex: 1;
  min-width: 0;
}

.wr-cadd__searchinput:focus { outline: none; }

.wr-cadd__searchinput.is-error { color: #B91C1C; }

.wr-cadd__results {
  display: grid;
  gap: 5px;
  max-height: 210px;
  overflow-y: auto;
}

.wr-cadd__hint {
  font-size: 12px;
  color: var(--wr-muted-2, #9CA3AF);
  margin: 4px 0;
  text-align: center;
}

.wr-cadd__result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid transparent;
  background: var(--wr-bg-2, #F6F7FA);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}

.wr-cadd__result:hover { background: #F2EDFA; }

.wr-cadd__result.is-picked {
  border-color: var(--wr-violet, #8A63C1);
  background: #F2EDFA;
}

.wr-cadd__resultav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #fff;
  color: var(--wr-violet, #8A63C1);
  flex: none;
}

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

.wr-cadd__resultname {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-cadd__resultrole {
  display: block;
  font-size: 11px;
  color: var(--wr-muted, #6B7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-cadd__foot {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.wr-cadd__foot .wr-btn { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   FICHE D'UNE CARTE + ÉDITEUR ENRICHI
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cedit {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.wr-cedit[hidden] { display: none; }

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

.wr-cedit__box {
  position: relative;
  /* 1080 plutôt que 860 : la colonne droite porte maintenant l'historique
     ET les rendez-vous, deux contenus qui respirent mal à 260 px. */
  width: min(100%, 1080px);
  max-height: min(90vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--wr-card, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(30, 27, 46, .34);
  overflow: hidden;
}

.wr-cedit__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: #F8F4FD;
  border-bottom: 1px solid #EEE7F5;
}

.wr-cedit__av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  background: #fff;
  color: var(--wr-violet, #8A63C1);
  flex: none;
}

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

.wr-cedit__name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink, #1E1B2E);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-cedit__role {
  font-size: 12.5px;
  color: var(--wr-muted, #6B7280);
  margin: 2px 0 0;
}

.wr-cedit__x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #EEE7F5;
  background: #fff;
  border-radius: 9px;
  color: var(--wr-muted, #6B7280);
  cursor: pointer;
  flex: none;
}

.wr-cedit__x svg { width: 16px; height: 16px; }

/* Deux colonnes : les champs à gauche, l'historique à droite. */
.wr-cedit__body {
  display: grid;
  /* 360 px à droite : un formulaire d'invitation avec plusieurs créneaux et
     un historique de commentaires tiennent mal en 260. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  padding: 20px 26px 24px;
  overflow-y: auto;
}

/* Sous 900 px, les deux colonnes s'empilent : côte à côte, chacune
   deviendrait trop étroite pour être utilisable. */
@media (max-width: 900px) {
  .wr-cedit__body { grid-template-columns: minmax(0, 1fr); }
}

.wr-cedit__form { display: grid; gap: 12px; align-content: start; }

.wr-cedit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 10px;
}

.wr-cedit__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Collé au bas de la fenêtre : « Enregistrer » reste visible même quand
     la note est longue. -24px = le padding bas de .wr-cedit__body, qui est
     la zone qui défile. */
  position: sticky;
  bottom: -24px;
  z-index: 2;
  margin-top: 4px;
  padding: 12px 0 24px;
  background: var(--wr-card, #fff);
  border-top: 1px solid var(--wr-line, #EEF1F7);
}

/* La note ne doit pas pousser le pied hors de l'écran à elle seule. */
.wr-cedit__form .wr-rte__zone { min-height: 110px; max-height: 260px; overflow-y: auto; }

/* ══════════════════════════════════════════════════════════════════════
   LE CV DANS LA FICHE D'UNE CARTE — profil plateforme

   En tête de la colonne gauche, au-dessus du formulaire : c'est ce qu'on
   ouvre une carte de candidat pour lire. Il défile dans son cadre, pour que
   le formulaire et ses boutons restent à portée.
   ══════════════════════════════════════════════════════════════════════ */
.wr-cedit__main { display: grid; gap: 16px; align-content: start; min-width: 0; }

.wr-cedit__cv {
  border: 1px solid var(--wr-line-2, #E5E9F0);
  border-radius: 14px;
  background: var(--wr-card, #fff);
  overflow: hidden;
}
.wr-cedit__cv[hidden] { display: none; }

.wr-cedit__cvhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--wr-violet-softer, #F8F4FD);
  border-bottom: 1px solid #EEE7F5;
}
.wr-cedit__cvtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wr-violet, #8A63C1);
}
.wr-cedit__cvtitle svg { width: 16px; height: 16px; }
.wr-cedit__cvactions { display: inline-flex; gap: 8px; }
.wr-cedit__cvactions [hidden] { display: none; }

.wr-cedit__cvbody {
  max-height: 360px;
  overflow-y: auto;
  padding: 14px 18px 18px;
  font-size: 13.5px;
}
.wr-cedit__cvbody[hidden] { display: none; }
/* Le gabarit du CV est pensé pour une page : dans la fiche, ses titres de
   section se resserrent. */
.wr-cedit__cvbody .wr-cvb__sec { margin-top: 14px; }
.wr-cedit__cvbody .wr-cvb__sec:first-child { margin-top: 0; }

.wr-cedit__cvlock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--wr-ink-2, #374151);
}
.wr-cedit__cvlock[hidden] { display: none; }
.wr-cedit__cvlock > span:last-child { display: grid; gap: 3px; }
.wr-cedit__cvlock a { color: var(--wr-violet, #8A63C1); font-weight: 700; text-decoration: none; }
.wr-cedit__cvlock a:hover { text-decoration: underline; }
.wr-cedit__cvlockico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
}
.wr-cedit__cvlockico svg { width: 17px; height: 17px; }

.wr-cedit__cvnone {
  margin: 0;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--wr-muted, #6B7280);
}
.wr-cedit__cvnone[hidden] { display: none; }

.wr-cedit__erreur {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  font-size: 13px;
}
.wr-cedit__erreur[hidden] { display: none; }

.wr-cedit__spacer { flex: 1; }

/* ── L'historique ───────────────────────────────────────────────────────── */

.wr-cedit__side {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-left: 20px;
  border-left: 1px solid var(--wr-line, #EEF1F7);
}

.wr-cedit__sidetitle {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted-2, #9CA3AF);
}

.wr-cedit__events {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}

.wr-cedit__empty {
  font-size: 12px;
  color: var(--wr-muted-2, #9CA3AF);
  margin: 0;
}

.wr-cevent {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  background: var(--wr-bg-2, #F6F7FA);
  border-radius: 9px;
}

.wr-cevent__type {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wr-violet, #8A63C1);
}

.wr-cevent__txt {
  font-size: 11.5px;
  color: var(--wr-ink-2, #374151);
  line-height: 1.4;
}

.wr-cevent__date {
  font-size: 10.5px;
  color: var(--wr-muted-2, #9CA3AF);
}

.wr-cedit__profile {
  font-size: 12px;
  font-weight: 600;
  color: var(--wr-violet, #8A63C1);
  text-align: center;
  padding: 8px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 9px;
}

@media (max-width: 720px) {
  /* L'historique passe sous les champs : deux colonnes sur 380 px
     réduiraient chacune à l'illisible. */
  .wr-cedit__body { grid-template-columns: minmax(0, 1fr); }

  .wr-cedit__side {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--wr-line, #EEF1F7);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉDITEUR ENRICHI

   Trois commandes seulement. Un éditeur complet inviterait à coller du
   contenu venu de Word, avec ses styles et parfois ses scripts.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-rte {
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.wr-rte:focus-within { border-color: var(--wr-violet, #8A63C1); }

.wr-rte__bar {
  display: flex;
  gap: 2px;
  padding: 5px 6px;
  background: var(--wr-bg-2, #F6F7FA);
  border-bottom: 1px solid var(--wr-line, #EEF1F7);
}

.wr-rte__btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--wr-ink-2, #374151);
  cursor: pointer;
}

.wr-rte__btn:hover { background: #fff; color: var(--wr-violet, #8A63C1); }

.wr-rte__zone {
  /* Plus haut qu'avant (92 → 160 px, plafond 220 → 520) : une description
     d'offre se relit d'un bloc, pas à travers une fente de six lignes. */
  min-height: 160px;
  max-height: 520px;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wr-ink, #1E1B2E);
}

.wr-rte__zone:focus { outline: none; }

/* Le champ principal (la description) ouvre encore plus haut. */
.wr-rte--large .wr-rte__zone { min-height: 300px; max-height: 720px; }

/* Le compteur de caractères, sous l'éditeur : discret, puis orange à
   l'approche de la limite, rouge dessus — la couleur dit ce que le chiffre
   n'exige pas de lire. */
.wr-rte__count {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  color: var(--wr-muted, #6B7280);
  font-variant-numeric: tabular-nums;
}

.wr-rte__count.is-near { color: #B45309; }
.wr-rte__count.is-limit { color: #B42318; font-weight: 600; }
.wr-rte__zone p { margin: 0 0 6px; }
.wr-rte__zone ul, .wr-rte__zone ol { margin: 0 0 6px; padding-left: 18px; }

/* ── Avatar dans les résultats de recherche ─────────────────────────────── */

.wr-cadd__resultimg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #fff;
}

/* L'offre visée sur une carte. Discrète mais lisible : c'est un repère de
   tri, pas le contenu principal de la carte. */
.wr-ccard__job {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wr-violet, #8A63C1);
  background: var(--wr-violet-l, #F2EDFA);
  border-radius: 6px;
  padding: 4px 7px;
  margin-bottom: 8px;
}

.wr-ccard__job svg { width: 11px; height: 11px; flex: none; }

.wr-ccard__job span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   INFOBULLES DE LA SIDEBAR REPLIÉE

   Repliée, la sidebar ne montre que des icônes. L'infobulle rend le libellé
   au survol — à DROITE, hors de la colonne, pour ne recouvrir aucune autre
   icône.

   Pourquoi pas l'attribut `title` natif : il attend environ une seconde,
   apparaît sous le curseur (donc par-dessus l'icône voisine) et son style
   échappe au navigateur. Sur une bande de 68 px, ces trois défauts se
   cumulent.

   Le `title` reste posé par le JS comme repli si le CSS ne charge pas.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-side.is-collapsed .wr-side__link[data-tip],
.wr-side.is-collapsed .wr-side__toggle[data-tip] {
  position: relative;
}

.wr-side.is-collapsed .wr-side__link[data-tip]::after,
.wr-side.is-collapsed .wr-side__toggle[data-tip]::after {
  content: attr(data-tip);

  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);

  /* Au-dessus des cartes voisines, sous les modals (1200). */
  z-index: 60;

  padding: 7px 11px;
  border-radius: 8px;
  background: var(--wr-ink, #1E1B2E);
  color: #fff;

  /* La taille est remise ici : le lien porte `font-size: 0` pour masquer
     son libellé, et l'infobulle en hériterait sans cette ligne. */
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;

  box-shadow: 0 6px 20px -6px rgba(30, 27, 46, .4);

  opacity: 0;
  pointer-events: none;
  transition: opacity .13s ease;
}

/* La petite flèche vers la gauche. */
.wr-side.is-collapsed .wr-side__link[data-tip]::before,
.wr-side.is-collapsed .wr-side__toggle[data-tip]::before {
  content: '';

  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;

  border: 5px solid transparent;
  border-right-color: var(--wr-ink, #1E1B2E);

  opacity: 0;
  pointer-events: none;
  transition: opacity .13s ease;
}

.wr-side.is-collapsed .wr-side__link[data-tip]:hover::after,
.wr-side.is-collapsed .wr-side__link[data-tip]:hover::before,
.wr-side.is-collapsed .wr-side__link[data-tip]:focus-visible::after,
.wr-side.is-collapsed .wr-side__link[data-tip]:focus-visible::before,
.wr-side.is-collapsed .wr-side__toggle[data-tip]:hover::after,
.wr-side.is-collapsed .wr-side__toggle[data-tip]:hover::before,
.wr-side.is-collapsed .wr-side__toggle[data-tip]:focus-visible::after,
.wr-side.is-collapsed .wr-side__toggle[data-tip]:focus-visible::before {
  opacity: 1;
}

/* Les cartes ne doivent pas rogner l'infobulle : sans ça, elle serait
   coupée net au bord de la colonne. */
.wr-side.is-collapsed,
.wr-side.is-collapsed .wr-side__card {
  overflow: visible;
}

/* Au tactile, il n'y a pas de survol : l'infobulle resterait bloquée
   affichée après un appui. */
@media (hover: none) {
  .wr-side.is-collapsed .wr-side__link[data-tip]::after,
  .wr-side.is-collapsed .wr-side__link[data-tip]::before {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGE D'ALERTE DANS LA SIDEBAR

   Sert à signaler une fiche entreprise manquante. Sans elle, le recruteur ne
   peut ni publier d'offre ni apparaître dans l'annuaire : c'est un blocage,
   pas un simple champ à compléter. Le rouge le dit, là où le gris du tag
   ordinaire se lirait comme une information neutre.

   Le contraste respecte le seuil AA (#B91C1C sur #FEE2E2) : un rouge plus
   clair serait joli et illisible.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-side__tag--alert {
  color: #B91C1C;
  background: #FEE2E2;
  border-color: #FECACA;
}

/* Repliée, la sidebar masque les libellés — le badge suivrait. On le
   remplace par une pastille sur l'icône : l'alerte doit rester visible,
   c'est sa raison d'être. */
.wr-side.is-collapsed .wr-side__tag--alert {
  /* `display` est mis à `none` par la règle générale des tags ; on le
     rétablit pour cette variante seulement. */
  display: block;
  position: absolute;
  top: 5px;
  right: 7px;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DC2626;
  border: 1.5px solid #fff;
  /* Le texte disparaît, la pastille reste : `font-size: 0` sur le lien
     l'aurait de toute façon réduit à rien. */
  overflow: hidden;
  text-indent: -999px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUTON TABLEAU DE BORD (header)

   Raccourci vers l'espace de travail depuis n'importe quelle page du site.
   Masqué sous 991 px : la sidebar devient un drawer qui contient déjà ce
   lien, et le header mobile est trop étroit pour l'accueillir.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-head__dash {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  margin-left: 18px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 100px;
  background: var(--wr-card, #fff);
  font-size: 13px;
  font-weight: 600;
  color: var(--wr-ink-2, #374151);
  white-space: nowrap;
  flex: none;
  transition: border-color .14s ease, color .14s ease;
}

.wr-head__dash:hover {
  border-color: var(--wr-violet, #8A63C1);
  color: var(--wr-violet, #8A63C1);
}

/* « Mon espace candidat / entreprise » en violet pastel : c'est la porte
   de retour vers son espace, elle se distingue du menu public. */
.wr-head__dash {
  background: var(--wr-violet-soft, #F2EDFA);
  border-color: #E2D6F3;
  color: var(--wr-violet-dark, #6B47A6);
  font-weight: 700;
}
.wr-head__dash svg { color: var(--wr-violet, #8A63C1); }
.wr-head__dash:hover { background: #EAE0F7; border-color: var(--wr-violet-2, #A98AD3); color: var(--wr-violet-dark, #6B47A6); }

/* Les plateformes sœurs, à côté : discrètes, en texte, avec la flèche
   « externe ». */
.wr-head__ext { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; flex: none; }
.wr-head__extlink {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  border-radius: 100px;
  font-size: 12.5px; font-weight: 600;
  color: var(--wr-muted, #6B7280);
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.wr-head__extlink svg { width: 12px; height: 12px; flex: none; opacity: .7; }
.wr-head__extlink:hover { background: var(--wr-violet-softer, #F8F4FD); color: var(--wr-violet-dark, #6B47A6); }
@media (max-width: 1360px) {
  .wr-head__ext { display: none; }
}

.wr-head__dash svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 991px) {
  .wr-head__dash { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SAISIE PAR ÉTIQUETTES

   Le champ envoyé au serveur reste un input caché dont la valeur est
   « React, TypeScript ». Ces styles n'habillent que la surface visible.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 10px;
  background: var(--wr-card, #fff);
  cursor: text;
  transition: border-color .14s ease;
}

.wr-tags:focus-within { border-color: var(--wr-violet, #8A63C1); }

.wr-tags__list {
  display: contents;
}

.wr-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  background: var(--wr-violet-l, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
}

.wr-tag__x {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  flex: none;
}

.wr-tag__x:hover { opacity: 1; background: rgba(138, 99, 193, .16); }

.wr-tags__input {
  flex: 1;
  min-width: 120px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--wr-ink, #1E1B2E);
  padding: 3px 0;
}

.wr-tags__input:focus { outline: none; }
.wr-tags__input::placeholder { color: var(--wr-muted-2, #9CA3AF); }

/* Les textes bruts d'anciennes offres gardent leurs retours à la ligne
   dans l'éditeur enrichi. */
.wr-rte__zone { white-space: pre-wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   LISTE DÉROULANTE ENRICHIE

   Habille un `<select>` sans le remplacer. L'apport par rapport au menu
   natif : la pastille de couleur de chaque colonne, que le système ne sait
   pas afficher.

   Le `<select>` d'origine reste dans l'arbre — il porte le nom et la valeur
   envoyés au serveur. Il est sorti du flux visuel, pas masqué par
   `display:none` : la validation native doit pouvoir le pointer.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-rs { position: relative; }

.wr-rs__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wr-rs__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 10px;
  background: var(--wr-card, #fff);
  font-family: inherit;
  font-size: 13px;
  color: var(--wr-ink, #1E1B2E);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: border-color .14s ease;
}

.wr-rs__btn:hover { border-color: var(--wr-violet-2, #E4D9F5); }

.wr-rs__btn:focus-visible,
.wr-rs__btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--wr-violet, #8A63C1);
}

.wr-rs__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.wr-rs__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La pastille : c'est elle qui justifie ce composant. */
.wr-rs__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.wr-rs__caret {
  display: grid;
  place-items: center;
  color: var(--wr-muted-2, #9CA3AF);
  flex: none;
  transition: transform .16s ease;
}

.wr-rs__caret svg { width: 15px; height: 15px; }

.wr-rs__btn[aria-expanded="true"] .wr-rs__caret { transform: rotate(180deg); }

.wr-rs__panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 40;

  max-height: 260px;
  overflow-y: auto;
  padding: 5px;

  background: var(--wr-card, #fff);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 11px;
  box-shadow: 0 12px 32px -10px rgba(30, 27, 46, .24);
}

.wr-rs__panel[hidden] { display: none; }

.wr-rs__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--wr-ink, #1E1B2E);
  cursor: pointer;
  text-align: left;
}

.wr-rs__opt:hover,
.wr-rs__opt.is-active {
  background: var(--wr-violet-l, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
}

.wr-rs__opt[aria-selected="true"] {
  font-weight: 700;
}

.wr-rs__opt[aria-selected="true"]::after {
  content: '✓';
  margin-left: auto;
  color: var(--wr-violet, #8A63C1);
  flex: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONFIRMATION D'UNE ACTION IRRÉVERSIBLE

   Remplace `window.confirm` sur les suppressions. Volontairement étroit et
   centré : il interrompt, c'est son rôle.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-confirm {
  position: fixed;
  inset: 0;
  /* Au-dessus des autres modals (1200) : il se superpose à la fiche
     d'édition depuis laquelle on lance la suppression. */
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
}

.wr-confirm[hidden] { display: none; }

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

.wr-confirm__box {
  position: relative;
  width: min(100%, 400px);
  padding: 26px 24px 22px;
  background: var(--wr-card, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(30, 27, 46, .4);
  text-align: center;
}

/* L'icône en rouge doux : elle annonce la nature de l'action avant même
   qu'on lise le titre. */
.wr-confirm__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FEE2E2;
  color: #B91C1C;
}

.wr-confirm__icon svg { width: 22px; height: 22px; }

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

.wr-confirm__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wr-muted, #6B7280);
  margin: 0 0 20px;
  word-break: break-word;
}

.wr-confirm__body[hidden] { display: none; }

.wr-confirm__actions {
  display: flex;
  gap: 9px;
}

.wr-confirm__actions .wr-btn { flex: 1; justify-content: center; }

/* Le bouton destructif. Défini ici parce que `wr-btn--danger` ne vit que
   dans wr-applications.css, qui n'est pas chargé sur toutes les pages. */
.wr-btn--danger {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
}

.wr-btn--danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
}

.wr-btn--danger:focus-visible {
  outline: 2px solid #FCA5A5;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMMENTAIRES

   Un commentaire est un événement d'historique. Le formulaire est au-dessus
   de la liste : on écrit, puis on voit apparaître.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cnote {
  display: grid;
  gap: 7px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--wr-line, #EEF1F7);
}

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

.wr-cnote__type,
.wr-cnote__date {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--wr-ink-2, #374151);
}

.wr-cnote__type:focus,
.wr-cnote__date:focus,
.wr-cnote__text:focus {
  outline: none;
  border-color: var(--wr-violet, #8A63C1);
}

.wr-cnote__text {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wr-ink, #1E1B2E);
  resize: vertical;
}

.wr-cnote__text::placeholder { color: var(--wr-muted-2, #9CA3AF); }

/* ── Une entrée d'historique ────────────────────────────────────────────── */

.wr-cevent__head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wr-cevent__title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
}

/* Le bouton de suppression n'apparaît qu'au survol de sa ligne : visible en
   permanence, il attirerait l'œil plus que le commentaire lui-même. */
.wr-cevent__x {
  margin-left: auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: var(--wr-muted-2, #9CA3AF);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}

.wr-cevent:hover .wr-cevent__x,
.wr-cevent__x:focus-visible { opacity: 1; }

.wr-cevent__x:hover { color: #DC2626; background: #FEE2E2; }

/* Au tactile, il n'y a pas de survol : le bouton doit rester visible. */
@media (hover: none) {
  .wr-cevent__x { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INVITATIONS À UN RENDEZ-VOUS (fiche de carte)
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cinv {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}

.wr-cinv__open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--wr-line-2, #E5E9F0);
  background: transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wr-violet, #8A63C1);
  cursor: pointer;
}

.wr-cinv__open:hover { background: var(--wr-violet-l, #F2EDFA); }
.wr-cinv__open svg { width: 14px; height: 14px; flex: none; }

.wr-cinv__form { display: grid; gap: 7px; }

.wr-input--sm {
  padding: 7px 9px;
  font-size: 11.5px;
}

.wr-cinv__slots { display: grid; gap: 5px; }

.wr-cinv__slot { display: flex; gap: 5px; }

.wr-cinv__when {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--wr-ink, #1E1B2E);
}

.wr-cinv__slotx {
  width: 26px;
  border: 1px solid var(--wr-line, #EEF1F7);
  background: #fff;
  border-radius: 7px;
  color: var(--wr-muted-2, #9CA3AF);
  font-size: 14px;
  cursor: pointer;
  flex: none;
}

.wr-cinv__slotx:hover { color: #DC2626; border-color: #FCA5A5; }

.wr-cinv__add {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--wr-violet, #8A63C1);
  cursor: pointer;
  text-align: left;
  padding: 2px 0;
}

.wr-cinv__foot {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wr-cinv__dur {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--wr-muted, #6B7280);
  flex: 1;
}

.wr-cinv__dur select {
  padding: 5px 7px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  background: #fff;
}

/* ── Le lien généré ─────────────────────────────────────────────────────── */

.wr-cinv__result {
  padding: 10px;
  background: #FEF3C7;
  border-radius: 9px;
}

/* L'avertissement est en jaune : le lien ne sera plus jamais affiché, et
   l'utilisateur doit le comprendre AVANT de fermer la fiche. */
.wr-cinv__once {
  font-size: 10.5px;
  font-weight: 600;
  color: #92400E;
  margin: 0 0 7px;
  line-height: 1.35;
}

.wr-cinv__copy { display: flex; gap: 5px; }

.wr-cinv__linkfield {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #FCD34D;
  border-radius: 7px;
  background: #fff;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--wr-ink, #1E1B2E);
}

.wr-cinv__copybtn {
  padding: 6px 10px;
  border: 0;
  background: #92400E;
  border-radius: 7px;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: none;
}

/* ── Les invitations existantes ─────────────────────────────────────────── */

.wr-cinvrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: var(--wr-bg-2, #F6F7FA);
  border-radius: 8px;
  margin-bottom: 5px;
}

.wr-cinvrow__state {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 5px;
  flex: none;
}

.wr-cinvrow--pending .wr-cinvrow__state { background: #FEF3C7; color: #92400E; }
.wr-cinvrow--booked .wr-cinvrow__state { background: #DCFCE7; color: #15803D; }
.wr-cinvrow--cancelled .wr-cinvrow__state,
.wr-cinvrow--expired .wr-cinvrow__state { background: #F3F4F6; color: #6B7280; }

.wr-cinvrow__txt {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--wr-ink-2, #374151);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-cinvrow__when {
  font-size: 10px;
  color: var(--wr-muted-2, #9CA3AF);
  flex: none;
}

.wr-cinvrow__x {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: var(--wr-muted-2, #9CA3AF);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.wr-cinvrow__x:hover { color: #DC2626; background: #FEE2E2; }

/* ══════════════════════════════════════════════════════════════════════════
   BANDEAU DES RENDEZ-VOUS (au-dessus du vivier)
   ══════════════════════════════════════════════════════════════════════════ */

.wr-rdvbar {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--wr-card, #fff);
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 14px;
}

.wr-rdvbar__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wr-muted, #6B7280);
  margin-bottom: 10px;
}

.wr-rdvbar__head svg { width: 14px; height: 14px; flex: none; }

.wr-rdvbar__n {
  padding: 1px 7px;
  background: var(--wr-violet-l, #F2EDFA);
  color: var(--wr-violet, #8A63C1);
  border-radius: 20px;
  font-size: 10.5px;
}

.wr-rdvbar__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.wr-rdvbar__item {
  display: grid;
  gap: 3px;
  padding: 8px 12px;
  background: var(--wr-bg-2, #F6F7FA);
  border-radius: 10px;
  border-left: 3px solid var(--wr-line-2, #E5E9F0);
  flex: none;
  min-width: 160px;
}

/* Confirmé en vert, en attente en jaune : la couleur dit l'état avant
   même qu'on lise la ligne. */
.wr-rdvbar__item--booked { border-left-color: #22C55E; }
.wr-rdvbar__item--pending { border-left-color: #F59E0B; }

.wr-rdvbar__who {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wr-ink, #1E1B2E);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-rdvbar__when { font-size: 11px; color: var(--wr-muted, #6B7280); }
.wr-rdvbar__wait { font-size: 11px; color: #B45309; }

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGES D'ÉTAT (retour d'une action)

   Utilisés après un aller-retour OAuth, où le résultat arrive en paramètre
   d'URL plutôt qu'en réponse directe.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-note {
  font-size: 12.5px;
  line-height: 1.45;
  padding: 10px 13px;
  border-radius: 9px;
  background: var(--wr-bg-2, #F6F7FA);
  color: var(--wr-ink-2, #374151);
  margin: 0 0 14px;
}

.wr-note--ok { background: #DCFCE7; color: #15803D; }
.wr-note--warn { background: #FEF3C7; color: #92400E; }

.wr-hint--sm {
  font-size: 11.5px;
  color: var(--wr-muted-2, #9CA3AF);
  margin-top: 6px;
}

/* ── Trouver des créneaux ───────────────────────────────────────────────── */

.wr-cinv__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wr-cinv__auto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  background: var(--wr-violet-l, #F2EDFA);
  border-radius: 7px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wr-violet, #8A63C1);
  cursor: pointer;
}

.wr-cinv__auto:hover { background: #E9DEF8; }
.wr-cinv__auto:disabled { opacity: .5; cursor: default; }
.wr-cinv__auto svg { width: 12px; height: 12px; flex: none; }

/* L'indice dit d'où viennent les créneaux : sans agenda relié, ils ne
   tiennent pas compte des rendez-vous existants. */
.wr-cinv__hint {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--wr-muted, #6B7280);
  margin: 0;
  padding: 5px 8px;
  background: var(--wr-bg-2, #F6F7FA);
  border-radius: 6px;
}

.wr-cinv__hint[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CHOIX DES AGENDAS GOOGLE

   Des cases à cocher, pas un menu : croiser l'agenda pro et le perso est un
   besoin courant — un rendez-vous privé rend indisponible aussi.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cals {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}

.wr-cal {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s ease;
}

.wr-cal:hover { background: var(--wr-bg-2, #F6F7FA); }

.wr-cal input { flex: none; accent-color: var(--wr-violet, #8A63C1); }

/* La pastille reprend la couleur de l'agenda dans Google : c'est le repère
   visuel que l'utilisateur connaît déjà. */
.wr-cal__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.wr-cal__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--wr-ink, #1E1B2E);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wr-cal__tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wr-violet, #8A63C1);
  background: var(--wr-violet-l, #F2EDFA);
  border-radius: 5px;
  padding: 2px 6px;
  flex: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ONGLETS DE LA FICHE CANDIDAT

   L'historique et les rendez-vous sont deux activités distinctes : on
   consulte l'un, on agit sur l'autre. Empilés, ils forçaient à faire
   défiler la colonne pour atteindre le formulaire d'invitation.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-ctabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 14px;
  background: var(--wr-bg-2, #F6F7FA);
  border-radius: 10px;
}

.wr-ctab {
  flex: 1;
  position: relative;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wr-muted, #6B7280);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.wr-ctab:hover { color: var(--wr-ink, #1E1B2E); }

.wr-ctab.is-on {
  background: #fff;
  color: var(--wr-violet, #8A63C1);
  box-shadow: 0 1px 3px rgba(30, 27, 46, .08);
}

/* La pastille signale une invitation en attente : sans elle, un onglet
   fermé cacherait l'information. */
.wr-ctab__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: #F59E0B;
  vertical-align: middle;
}

.wr-ctab__dot[hidden] { display: none; }

/* Les panneaux : un seul visible à la fois. */
.wr-cpane { display: none; }
.wr-cpane.is-on { display: block; }

/* Le bloc invitation n'a plus besoin de sa bordure de séparation : l'onglet
   fait déjà la coupure. */
.wr-cpane .wr-cinv {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TITRE ÉDITABLE DE LA FICHE

   Le nom se corrige dans l'en-tête. Il garde son allure de titre : rien ne
   signale qu'il est modifiable tant qu'on ne le survole pas — un champ de
   saisie permanent ferait ressembler l'en-tête à un formulaire de plus.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cedit__name[contenteditable] {
  padding: 2px 7px;
  margin-left: -7px;
  border-radius: 7px;
  outline: 0;
  cursor: text;
  transition: background .14s ease, box-shadow .14s ease;
}

.wr-cedit__name[contenteditable]:hover {
  background: var(--wr-bg-2, #F6F7FA);
}

.wr-cedit__name[contenteditable]:focus {
  background: #fff;
  box-shadow: 0 0 0 2px var(--wr-violet, #8A63C1);
}

/* Titre vide : on montre l'invite plutôt qu'une zone muette. */
.wr-cedit__name[contenteditable]:empty::before {
  content: attr(data-ph);
  color: var(--wr-muted-2, #9CA3AF);
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════
   RAFRAÎCHISSEMENT DU TABLEAU

   Discret : l'opération dure quelques centaines de millisecondes. Un
   indicateur trop visible attirerait plus l'attention que le changement
   lui-même.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cbframe {
  transition: opacity .16s ease;
}

.wr-cbframe.is-loading {
  opacity: .55;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   FICHE CANDIDAT — MODE LECTURE

   Une fiche s'ouvre bien plus souvent pour être consultée que pour être
   corrigée. En lecture, les champs s'aplatissent : plus de bordure, plus de
   fond. On lit une fiche, pas un formulaire.

   Le passage en `readonly` est fait par le JS — le CSS seul laisserait les
   champs modifiables, avec un rendu qui prétend le contraire.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-cedit__form.is-reading .wr-input,
.wr-cedit__form.is-reading .wr-textarea,
.wr-cedit__form.is-reading .wr-rte__zone {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  cursor: default;
}

/* Le sélecteur de colonne garde sa pastille de couleur : elle porte
   l'information de statut, qui reste utile en lecture. */
.wr-cedit__form.is-reading .wr-rs__box {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  cursor: default;
}

.wr-cedit__form.is-reading .wr-rs__caret,
.wr-cedit__form.is-reading .wr-rte__bar {
  display: none;
}

/* Un champ vide en lecture ne montrerait rien du tout : on garde une trace
   discrète pour que la ligne ne paraisse pas manquante. */
.wr-cedit__form.is-reading .wr-input:placeholder-shown::placeholder {
  color: var(--wr-line-2, #E5E9F0);
}

/* ── Les boutons du pied ────────────────────────────────────────────────── */

.wr-cedit__edit { display: none; }

.wr-cedit__form.is-reading .wr-cedit__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wr-cedit__edit svg { width: 13px; height: 13px; }

.wr-cedit__form.is-reading .wr-cedit__cancel,
.wr-cedit__form.is-reading .wr-cedit__save {
  display: none;
}

/* Le titre n'est éditable qu'en mode édition : le laisser modifiable en
   lecture inviterait à des corrections qu'on ne pourrait pas enregistrer. */
.wr-cedit__box.is-reading .wr-cedit__name[contenteditable]:hover {
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   VIVIER — GLISSER-DÉPOSER DES COLONNES

   L'en-tête est la poignée. Le curseur doit le dire avant le clic : une zone
   déplaçable qui ressemble à du texte inerte ne se découvre jamais.
   ══════════════════════════════════════════════════════════════════════════ */

.wr-ccol__head[data-ccol-handle] {
  cursor: grab;
  /* Sans ça, attraper l'en-tête sélectionne le titre au lieu de démarrer le
     glissement — et l'image de glissement devient un bout de texte surligné. */
  user-select: none;
  -webkit-user-select: none;
}

.wr-ccol__head[data-ccol-handle]:active { cursor: grabbing; }

/* Le menu « ⋮ » reste cliquable : il est DANS la poignée, et sans ça le
   premier appui commencerait un glissement au lieu d'ouvrir le menu. */
.wr-ccol__head[data-ccol-handle] .wr-ccol__menu {
  cursor: pointer;
  -webkit-user-drag: none;
}

.wr-ccol.is-col-dragging {
  opacity: .55;
  /* Léger décollement : on doit voir LAQUELLE des colonnes on déplace, y
     compris quand elles se ressemblent toutes. */
  transform: rotate(.6deg);
  transition: none;
}

/* ══════════════════════════════════════════════════════════════════════
   MON PROFIL PUBLIC (wr-publink)

   Le lien /cv/{ref} que le candidat partage. Il est TIRÉ AU SORT et
   n'apparaît nulle part ailleurs : ce bloc est le seul endroit d'où il
   peut sortir. D'où le traitement appuyé — encadré, champ sélectionnable,
   bouton de copie — plutôt qu'une ligne perdue dans un pied de page.
   ══════════════════════════════════════════════════════════════════════ */
.wr-publink {
  border: 1px solid var(--wr-violet-2, #E4D9F5);
  background: var(--wr-violet-softer, #F6F1FD);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 22px;
}

.wr-publink__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wr-publink__ico {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px; display: grid; place-items: center;
  background: var(--wr-violet, #8A63C1); color: #fff;
}
.wr-publink__ico svg { width: 16px; height: 16px; }
.wr-publink__title { font-size: 15.5px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 3px; }
.wr-publink__sub { font-size: 12.5px; color: var(--wr-muted, #6B7280); margin: 0; line-height: 1.5; }

.wr-publink__row { display: flex; gap: 8px; align-items: center; }
.wr-publink__input {
  flex: 1; min-width: 0;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 10px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--wr-ink, #1E1B2E);
  /* `text-overflow` sur un input : l'URL est longue, on veut voir le début
     (le domaine) plutôt qu'un milieu illisible. */
  text-overflow: ellipsis;
}
.wr-publink__input:focus { outline: none; border-color: rgba(138, 99, 193, .45); box-shadow: 0 0 0 3px rgba(138, 99, 193, .12); }

.wr-publink__copy { flex: none; height: 40px; white-space: nowrap; }
.wr-publink__copy svg { width: 15px; height: 15px; }
/* La confirmation passe au vert : « Copié ! » en violet se confond avec
   l'état normal du bouton, et le geste n'a pas de retour visible. */
.wr-publink__copy.is-copied { border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.wr-publink__copy[hidden] { display: none; }

.wr-publink__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }
.wr-publink__see {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700;
  color: var(--wr-violet, #8A63C1); text-decoration: none;
}
.wr-publink__see:hover { text-decoration: underline; }
.wr-publink__see svg { width: 13px; height: 13px; }

.wr-publink__warn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #B45309;
}
.wr-publink__warn svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 560px) {
  .wr-publink__row { flex-wrap: wrap; }
  .wr-publink__copy { width: 100%; justify-content: center; }
}

/* ── Mode anonyme, dans le bloc « profil public » ── */
.wr-publink__anon {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--wr-violet-2, #E4D9F5);
}
.wr-publink__anontxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wr-publink__anontxt strong { font-size: 13px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-publink__anontxt span { font-size: 12px; color: var(--wr-muted, #6B7280); line-height: 1.45; }

/* Un vrai bouton, pas une case déguisée : il POSTE, donc il fonctionne
   sans JavaScript. `role="switch"` + `aria-checked` donnent l'état aux
   lecteurs d'écran, que l'apparence seule ne transmet pas. */
.wr-publink__switch {
  flex: none; width: 46px; height: 26px; padding: 3px;
  border: 0; border-radius: 100px; cursor: pointer;
  background: #D8DCE6; transition: background .18s ease;
}
.wr-publink__switch.is-on { background: var(--wr-violet, #8A63C1); }
.wr-publink__knob {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(30,27,46,.28);
  transition: transform .18s ease;
}
.wr-publink__switch.is-on .wr-publink__knob { transform: translateX(20px); }
.wr-publink__switch:focus-visible { outline: 2px solid var(--wr-violet, #8A63C1); outline-offset: 2px; }

/* ── Le second lien : le profil anonyme ── */
.wr-publink__alt {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--wr-violet-2, #E4D9F5);
}
.wr-publink__althead { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.wr-publink__althead svg { width: 14px; height: 14px; flex: none; color: var(--wr-violet, #8A63C1); }
.wr-publink__althead strong { font-size: 13px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-publink__althint { font-size: 12px; color: var(--wr-muted, #6B7280); margin: 0 0 10px; line-height: 1.45; }

/* ══════════════════════════════════════════════════════════════════════
   TUNNEL DU CV ANONYME (wr-anon) + le document récapitulatif (wr-cvdoc)
   ══════════════════════════════════════════════════════════════════════ */
.wr-anon { max-width: 820px; }
.wr-anon__head { margin-bottom: 22px; }
.wr-anon__head--recap { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wr-anon__title { font-size: 26px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 6px; }
.wr-anon__sub { font-size: 14px; color: var(--wr-muted, #6B7280); margin: 0; line-height: 1.55; max-width: 62ch; }

.wr-anon__card {
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px;
  background: #fff; padding: 22px; margin-bottom: 18px;
}
.wr-anon__card--muted { background: var(--wr-bg, #F8F9FC); }
.wr-anon__card h2 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--wr-ink, #1E1B2E); }
.wr-anon__card p { font-size: 14px; line-height: 1.6; color: #3F4451; margin: 0 0 16px; }

/* L'avertissement de relecture. Ambre plutôt que rouge : ce n'est pas une
   erreur, c'est une responsabilité qu'on transfère au candidat. */
.wr-anon__warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 16px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
  font-size: 13px; line-height: 1.55;
}
.wr-anon__warn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.wr-anon__warn--big { font-size: 13.5px; padding: 14px 16px; margin-bottom: 22px; }

.wr-anon__state { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wr-anon__badge {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px;
  background: #F3F4F6; color: #6B7280;
}
.wr-anon__badge.is-on { background: #ECFDF5; color: #047857; }

.wr-anon__form { border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px; background: #fff; padding: 22px; }
.wr-anon__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; }
.wr-anon__hint { font-size: 12px; color: var(--wr-muted-2, #9CA3AF); margin: 6px 0 0; line-height: 1.45; }

.wr-anon__types { border: 0; padding: 0; margin: 0 0 18px; }
.wr-anon__types legend { font-size: 13px; font-weight: 700; color: var(--wr-ink, #1E1B2E); margin-bottom: 8px; padding: 0; }
.wr-anon__types label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 13.5px; color: #3F4451; }

/* ── Le document ── */
.wr-cvdoc {
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px;
  background: #fff; padding: 30px; margin-bottom: 18px;
}
.wr-cvdoc__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--wr-violet, #8A63C1); margin-bottom: 20px; }
.wr-cvdoc__mask {
  width: 56px; height: 56px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
}
.wr-cvdoc__mask svg { width: 26px; height: 26px; }
.wr-cvdoc__job { font-size: 21px; font-weight: 800; margin: 0 0 4px; color: var(--wr-ink, #1E1B2E); }
.wr-cvdoc__meta { font-size: 13.5px; color: var(--wr-muted, #6B7280); margin: 0; }

.wr-cvdoc__sec { margin-bottom: 22px; }
.wr-cvdoc__sec h3 {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--wr-violet, #8A63C1); margin: 0 0 10px;
}
.wr-cvdoc__sec p { font-size: 14px; line-height: 1.65; color: #3F4451; margin: 0; }
.wr-cvdoc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.wr-cvdoc__list li { font-size: 14px; color: #3F4451; line-height: 1.55; }
.wr-cvdoc__list strong { display: block; color: var(--wr-ink, #1E1B2E); font-weight: 700; }
.wr-cvdoc__org { font-size: 13px; color: var(--wr-violet, #8A63C1); font-weight: 600; }
.wr-cvdoc__dates { font-size: 12.5px; color: var(--wr-muted-2, #9CA3AF); margin-left: 8px; }
.wr-cvdoc__list p { font-size: 13.5px; margin: 4px 0 0; }

.wr-anon__publish {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px; background: var(--wr-bg, #F8F9FC); padding: 18px;
}
.wr-anon__publish strong { display: block; font-size: 14px; color: var(--wr-ink, #1E1B2E); margin-bottom: 3px; }
.wr-anon__publish span { font-size: 12.5px; color: var(--wr-muted, #6B7280); }

.wr-anon__link { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--wr-muted, #6B7280); }
.wr-anon__link code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--wr-ink, #1E1B2E); }

/* ⚠️  L'IMPRESSION REMPLACE LE PDF.

   Il n'y a volontairement aucun fichier généré côté serveur. Ctrl+P doit
   donc suffire : on retire la coquille (sidebar, en-tête, boutons) et on
   laisse le document seul sur la page. */
@media print {
  .wr-side, .wr-head, .wr-drawer, .wr-anon__noprint, .wr-anon__head, .wr-anon__warn { display: none !important; }
  .wr-anon { max-width: none; }
  .wr-cvdoc { border: 0; padding: 0; margin: 0; }
  .wr-cvdoc__sec { break-inside: avoid; }

  /* ⚠️  LE DOCUMENT REPASSE SUR UNE COLONNE À L'IMPRESSION.

     À l'écran, le récapitulatif est en deux colonnes (document + actions).
     Les actions sont déjà masquées (`wr-anon__noprint`), mais la grille
     gardait sa piste de 360 px vide : le CV s'imprimait sur les deux tiers
     de la page. */
  .wr-anon__cols { display: block !important; }

  /* Une section ne se coupe pas au milieu d'une page. Et à l'impression,
     les cadres et les fonds ne servent plus à rien : le papier sépare
     mieux que n'importe quelle bordure, et une bordure par section coûte
     de l'encre pour rien. */
  .wr-cvb__sec, .wr-cvp__section, .wr-cvp__head { break-inside: avoid; }
  .wr-cvb__sec, .wr-cvp__section, .wr-cvp__head {
    border: 0 !important; background: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MOTEUR DE RECHERCHE RECRUTEUR (wr-search / wr-sres)
   ══════════════════════════════════════════════════════════════════════ */
.wr-search__head { margin-bottom: 20px; }
/* La Base de candidats : l'enveloppe de page (sans la card du formulaire
   `.wr-search`, qui est celle de la barre de recherche), et le titre de la
   section des profils anonymes, sous les profils identifiés. */
.wr-database { display: block; }
.wr-database__subtitle { margin: 26px 0 12px; font-size: 15px; font-weight: 700; color: var(--wr-ink); }
.wr-search__title { font-size: 26px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 6px; }
.wr-search__sub { font-size: 14px; color: var(--wr-muted, #6B7280); margin: 0; }

/* L'écran verrouillé : informatif, pas alarmant. Ce n'est pas une panne. */
.wr-search__locked {
  text-align: center; padding: 44px 24px;
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px; background: #fff;
}
.wr-search__lockico {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
}
.wr-search__lockico svg { width: 24px; height: 24px; }
.wr-search__locked h2 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--wr-ink, #1E1B2E); }
.wr-search__locked p { font-size: 14px; line-height: 1.6; color: var(--wr-muted, #6B7280); max-width: 52ch; margin: 0 auto 18px; }

/* ── Demande d'accès au moteur ─────────────────────────────────────────────
   Le formulaire est en ligne : le bouton doit s'aligner avec les deux liens
   qui l'entourent, pas passer à la ligne comme un bloc. */
.wr-search__lockform { display: inline; }

/* L'état d'une demande déjà envoyée. Teinté violet plutôt que gris : c'est
   une réponse à une action de l'utilisateur, elle doit se distinguer du
   texte explicatif au-dessus. */
.wr-search__lockstate {
  display: block;
  max-width: 52ch;
  margin: 14px auto 0;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wr-violet-dark, #6B47A6);
  background: var(--wr-violet-softer, #F8F4FD);
  border: 1px solid var(--wr-violet-soft, #F2EDFA);
  border-radius: var(--wr-r-md, 12px);
}

.wr-search__filters {
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px;
  background: #fff; padding: 18px; margin-bottom: 18px;
}
.wr-search__row { display: flex; gap: 10px; margin-bottom: 14px; }
.wr-search__q { flex: 1; min-width: 0; }
.wr-search__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
/* Le bouton « Rechercher », en bas de la card des filtres : on remplit,
   puis on cherche. Aligné à droite, séparé des cases par un filet. */
.wr-search__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}

.wr-search__types { display: flex; flex-wrap: wrap; gap: 16px; }
.wr-search__types label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #3F4451; }

.wr-search__count { font-size: 13px; color: var(--wr-muted, #6B7280); margin: 0 0 12px; }
.wr-search__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.wr-sres {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 14px; background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wr-sres:hover { transform: translateY(-1px); border-color: rgba(138,99,193,.32); box-shadow: 0 8px 22px rgba(30,27,46,.07); }
.wr-sres:hover .wr-sres__chev { transform: translateX(3px); color: var(--wr-violet, #8A63C1); }

/* Le profil anonyme se distingue au premier coup d'œil : le recruteur doit
   savoir avant de cliquer qu'il n'y trouvera pas de nom. */
.wr-sres.is-anon { border-style: dashed; background: var(--wr-violet-softer, #F6F1FD); }

.wr-sres__ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
}
.wr-sres__ico svg { width: 18px; height: 18px; }
.wr-sres__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wr-sres__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-sres__top strong { font-size: 14.5px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-sres__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
  background: var(--wr-violet, #8A63C1); color: #fff;
}
.wr-sres__job { font-size: 13.5px; font-weight: 600; color: var(--wr-violet, #8A63C1); }
.wr-sres__meta { font-size: 12.5px; color: var(--wr-muted, #6B7280); }
.wr-sres__text {
  font-size: 12.5px; color: #3F4451; line-height: 1.5; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wr-sres__chev { width: 17px; height: 17px; flex: none; margin-top: 10px; color: var(--wr-muted-2, #9CA3AF); transition: transform .18s ease, color .18s ease; }

/* ══════════════════════════════════════════════════════════════════════
   BASE DE CANDIDATS — LE MOTEUR AVEC SES FILTRES (Premium+, 25/10/2026)
   views/recruiter/search.ejs · réutilise .wr-search__filters / __grid /
   __types / .wr-sres ; ajoute la barre de mots-clés, le pied du
   formulaire, l'étiquette Premium+ et la disponibilité.
   ══════════════════════════════════════════════════════════════════════ */
.wr-rch__head .wr-search__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wr-rch__plus {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px;
  background: var(--wr-violet, #8A63C1); color: #fff; letter-spacing: 0;
}
.wr-rch__form { padding: 18px 18px 14px; }
.wr-rch__qrow { display: flex; gap: 10px; margin-bottom: 16px; }
.wr-rch__q {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: 12px; background: var(--wr-bg-2, #F6F7FB);
  border: 1.5px solid var(--wr-line, #EEF1F7);
  transition: border-color .15s ease, background .15s ease;
}
.wr-rch__q:focus-within { border-color: var(--wr-violet, #8A63C1); background: #fff; }
.wr-rch__q svg { width: 18px; height: 18px; flex: none; color: var(--wr-muted, #6B7280); }
.wr-rch__q input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--wr-ink, #1E1B2E); }
.wr-rch__go { flex: none; min-height: 48px; padding-inline: 22px; }
.wr-rch__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; margin-bottom: 0; }
.wr-rch__field { margin-bottom: 0; min-width: 0; }
.wr-rch__field .wr-input, .wr-rch__field .wr-select { width: 100%; }
.wr-rch__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wr-line, #EEF1F7);
}
.wr-rch__types { border: 0; margin: 0; padding: 0; align-items: center; }
.wr-rch__legend { float: left; margin-right: 6px; font-size: 13px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-rch__types input { accent-color: var(--wr-violet, #8A63C1); width: 16px; height: 16px; }
.wr-rch__reset { font-size: 13.5px; font-weight: 600; color: var(--wr-violet-dark, #6B47A6); text-decoration: underline; text-underline-offset: 3px; }
.wr-rch__count { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; }
.wr-rch__count strong { color: var(--wr-ink, #1E1B2E); }

.wr-rch__ini { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.wr-rch__avail {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px;
  background: #F1F3F7; color: var(--wr-muted, #6B7280);
}
.wr-rch__avail--open { background: #E7F6EC; color: #1E7B3E; }
.wr-rch__avail--ecoute { background: #FFF4E2; color: #9A5B0B; }
.wr-rch .wr-sres { align-items: center; }
.wr-rch__cta {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: var(--wr-violet-dark, #6B47A6); white-space: nowrap;
}
.wr-rch__cta .wr-sres__chev { margin-top: 0; }
.wr-rch .wr-sres:hover .wr-rch__cta { color: var(--wr-violet, #8A63C1); }

@media (max-width: 640px) {
  .wr-rch__qrow { flex-direction: column; }
  .wr-rch__go { width: 100%; }
  .wr-rch__grid { grid-template-columns: 1fr 1fr; }
  .wr-rch .wr-sres { align-items: flex-start; flex-wrap: wrap; }
  .wr-rch__cta { width: 100%; justify-content: flex-end; }
}
@media (max-width: 359px) {
  .wr-rch__grid { grid-template-columns: 1fr; }
}

/* ── Présenter son CV anonyme par mail ── */
.wr-anon__share {
  border: 1px solid var(--wr-line, #EEF1F7); border-radius: 16px;
  background: #fff; padding: 22px; margin-top: 18px;
}
.wr-anon__share h2 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--wr-ink, #1E1B2E); }
.wr-anon__share > p { font-size: 13.5px; color: var(--wr-muted, #6B7280); line-height: 1.55; margin: 0 0 16px; }

/* ── Quota et historique des envois de CV anonyme ── */
.wr-anon__quota {
  font-size: 12.5px; font-weight: 700; color: var(--wr-violet, #8A63C1);
  margin: 0 0 12px;
}
.wr-anon__hist { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--wr-line, #EEF1F7); }
.wr-anon__hist h3 { font-size: 13px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 10px; }
.wr-anon__hist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wr-anon__hist li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--wr-muted, #6B7280);
  padding: 8px 12px; border-radius: 10px; background: var(--wr-bg, #F8F9FC);
}
.wr-anon__hist code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--wr-ink, #1E1B2E); }
.wr-anon__histco { font-weight: 600; color: var(--wr-violet, #8A63C1); }
.wr-anon__hist time { margin-left: auto; font-size: 12px; color: var(--wr-muted-2, #9CA3AF); }

/* ══════════════════════════════════════════════════════════════════════
   PLEINE LARGEUR — les écrans du CV anonyme

   `.wr-anon` plafonne à 820 px, ce qui convient à un formulaire court. Un
   CV complet, non : chaque expérience s'étirerait sur dix lignes et la
   comparaison entre postes deviendrait illisible. `--full` lève le plafond.
   ══════════════════════════════════════════════════════════════════════ */
.wr-anon--full { max-width: none; }
.wr-anon--full .wr-anon__card,
.wr-anon--full .wr-cvdoc,
.wr-anon--full .wr-anon__share,
.wr-anon--full .wr-anon__publish { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   LE CORPS D'UN CV (wr-cvb) — récapitulatif candidat et page publique
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️  UNE CARD PAR SECTION, ET SUR LES DEUX PAGES À LA FOIS.

   Ce partial sert le récapitulatif du candidat ET la page publique
   /cv/{ref}. Le récapitulatif annonce « voici exactement ce qu'une
   entreprise verra » : lui donner des cards et laisser l'autre en bloc
   continu ferait de cette phrase un mensonge. La règle vit donc ici, dans
   le style du partial partagé — pas dans l'une des deux vues.

   Un long CV en un seul pavé blanc ne se parcourt pas : on ne sait plus
   quelle section on lit. Découpé, chaque bloc a un début et une fin. */
.wr-cvb__sec {
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.wr-cvb__sec:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .wr-cvb__sec { padding: 16px; } }
.wr-cvb__sec h3 {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--wr-violet, #8A63C1); margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--wr-line, #EEF1F7);
}
.wr-cvb__text { font-size: 14px; line-height: 1.65; color: #3F4451; margin: 0; }

.wr-cvb__pairs { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; }
.wr-cvb__pairs dt { font-size: 12.5px; font-weight: 700; color: var(--wr-muted, #6B7280); }
.wr-cvb__pairs dd { font-size: 13.5px; color: var(--wr-ink, #1E1B2E); margin: 0; }

.wr-cvb__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wr-cvb__chip {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
}
.wr-cvb__chip--soft { background: var(--wr-bg, #F8F9FC); color: var(--wr-muted, #6B7280); }
.wr-cvb__chip--tech { background: #ECFDF5; color: #047857; font-size: 11.5px; }

/* Deux colonnes dès qu'il y a la place : un CV complet en une seule colonne
   oblige à faire défiler longtemps pour comparer deux expériences. */
.wr-cvb__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
@media (min-width: 1100px) {
  .wr-cvb__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
}

.wr-cvb__item { min-width: 0; }
.wr-cvb__itemhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wr-cvb__itemhead strong { font-size: 14.5px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-cvb__dates { font-size: 12px; color: var(--wr-muted-2, #9CA3AF); margin-left: auto; white-space: nowrap; }
.wr-cvb__org { font-size: 13px; color: var(--wr-violet, #8A63C1); font-weight: 600; margin-top: 2px; }
.wr-cvb__contract {
  font-size: 11px; font-weight: 700; margin-left: 6px; padding: 1px 7px; border-radius: 100px;
  background: var(--wr-bg, #F8F9FC); color: var(--wr-muted, #6B7280);
}
.wr-cvb__url { font-size: 12.5px; color: var(--wr-muted, #6B7280); margin-top: 2px; word-break: break-all; }

.wr-cvb__bullets { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.wr-cvb__bullets li { font-size: 13.5px; line-height: 1.55; color: #3F4451; }

/* Le formulaire d'édition aussi : deux colonnes de sections sur grand écran
   feraient perdre le fil d'un CV — on garde une colonne, mais large. */
.wr-anon--full .wr-anon__form { max-width: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LES PAYS DANS LA BARRE REPLIÉE

   ⚠️  ILS N'ÉTAIENT NI MASQUÉS NI UTILISABLES.

   `.wr-side.is-collapsed .wr-facets { display: none }` masque les facettes
   ville et métier. Le bloc PAYS, lui, n'est pas dans `.wr-facets` — c'est
   un `.wr-facet` posé directement dans la barre, parce qu'il vient du
   référentiel géographique et non des résultats de la page. La règle ne
   l'attrapait donc pas : il restait affiché, écrasé dans 72 px, avec un
   champ de recherche et des noms de pays illisibles.

   ⚠️  ON NE LE MASQUE PAS POUR AUTANT.

   Les facettes ville et métier ont un équivalent DANS la page — le
   sélecteur de `pages/enterprises.ejs`. Le pays, non : le masquer
   supprimerait le seul moyen de filtrer par pays, alors qu'il tient
   parfaitement dans un rail. Le drapeau EST l'icône du pays, exactement
   comme les pictogrammes des liens juste au-dessus.

   Ne restent donc que les drapeaux, centrés, avec l'infobulle déjà
   utilisée par la navigation.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-side.is-collapsed .wr-facet[data-facet="pays"] {
  padding: 8px 6px;
  border-radius: 14px;
}

/* Le titre de section, la recherche et les compteurs n'ont pas de sens
   sur 72 px : ni la place d'être lus, ni celle d'être saisis. */
.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__label,
.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__search,
.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__count,
.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__label-txt,
.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__more {
  display: none;
}

.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 7px 0;
  border-radius: 10px;
}

.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__name {
  display: block;
  font-size: 17px;
  line-height: 1;
}

/* Le drapeau est le seul contenu restant : il porte la taille. Déplié, il
   reste un simple préfixe et n'a besoin d'aucune règle. */
.wr-facet__flag { font-style: normal; }

/* ⚠️  L'ÉTAT ACTIF DOIT SE VOIR SANS LE NOM.

   Déplié, le pays actif se reconnaît à son libellé en gras. Replié, il ne
   reste que le drapeau : sans fond, on ne sait plus lequel est
   sélectionné. */
.wr-side.is-collapsed .wr-facet[data-facet="pays"] .wr-facet__item.is-active {
  background: var(--wr-violet-soft, #F2EDFA);
}

/* L'infobulle du rail, reprise telle quelle des liens de navigation :
   une seule mécanique, pas deux à maintenir. */
.wr-side.is-collapsed .wr-facet__item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--wr-ink, #1E1B2E);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wr-t, .15s);
}

.wr-side.is-collapsed .wr-facet__item[data-tip]:hover::after,
.wr-side.is-collapsed .wr-facet__item[data-tip]:focus-visible::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   CARTE DE COMPLÉTION CLIQUABLE (wr-progress--clickable)

   ⚠️  UN LIEN SUPERPOSÉ, PAS UN LIEN ENGLOBANT.

   Envelopper la card dans un `<a>` aurait imbriqué les liens des puces —
   invalide en HTML, et le navigateur referme le premier avant d'ouvrir le
   second : la mise en page se disloque sans message d'erreur.

   Le lien couvre donc la card en position absolue, SOUS les puces. Le fond
   mène au formulaire, chaque puce garde sa propre destination.
   ══════════════════════════════════════════════════════════════════════ */
.wr-progress--clickable { position: relative; }

.wr-progress__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* ⚠️  LE CONTENU REPASSE AU-DESSUS.

   Sans `z-index` sur les enfants, le lien couvrirait les puces et les
   rendrait inertes — on aurait remplacé cinq destinations par une. */
.wr-progress--clickable > *:not(.wr-progress__cover) {
  position: relative;
  z-index: 1;
}

/* Le survol se voit sur toute la card, pas seulement sous le curseur. */
.wr-progress--clickable:hover { filter: brightness(1.04); }

/* Le focus clavier reste visible : le lien n'a aucun contenu propre, donc
   rien ne le signalerait sans cette règle. */
.wr-progress__cover:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* Le compteur « 1/2 » sur une puce partiellement remplie. Discret : il
   informe sans concurrencer le libellé. */
.wr-progress__count {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  opacity: .7;
}

/* ══════════════════════════════════════════════════════════════════════
   STATUT DE RECHERCHE — trois cartes au-dessus de la complétion

   Reprend le comportement du mobile : un clic suffit, l'état choisi est
   surligné. Chaque carte est un formulaire distinct, d'où la grille sur les
   `<form>` plutôt que sur des `<div>`.
   ══════════════════════════════════════════════════════════════════════ */
.wr-statuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* Le formulaire n'a aucune apparence propre : c'est le bouton qui porte
   la carte. Sans cette remise à zéro, la marge par défaut décalerait les
   trois colonnes. */
.wr-statuts form { margin: 0; }

.wr-statut__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 16px;
  text-align: left;
  border: 1.5px solid var(--wr-line, #EEF1F7);
  border-radius: var(--wr-r-lg, 16px);
  background: var(--wr-surface, #fff);
  cursor: pointer;
  transition: border-color var(--wr-t, .15s), background var(--wr-t, .15s);
}

.wr-statut__btn:hover { border-color: var(--wr-violet-soft, #D9CEF0); }

/* ══════════════════════════════════════════════════════════════════════
   ⚠️  UNE COULEUR PAR STATUT — LES MÊMES QUE L'APPLICATION MOBILE.

   Vert, orange, rouge : reprises telles quelles de `DashboardCandidate.tsx`
   (`scActive`, `scListening`, `scUnavailable`). Les redéfinir « à peu près »
   aurait donné deux verts légèrement différents selon l'écran — le genre
   d'écart qu'on ne s'explique pas et qu'on finit par attribuer à l'écran.

   ⚠️  LA COULEUR NE PORTE PAS SEULE L'INFORMATION.

   Un daltonien ne distingue pas le vert du rouge. La coche reste le signal
   principal : elle dit lequel est choisi, la couleur dit seulement quoi.
   ══════════════════════════════════════════════════════════════════════ */
.wr-statut.is-actif.est-open .wr-statut__btn      { background: #E8F5E9; border-color: #4CAF50; }
.wr-statut.is-actif.est-ecoute .wr-statut__btn    { background: #FFF3E0; border-color: #FF9800; }
.wr-statut.is-actif.est-offline .wr-statut__btn   { background: #FCE4EC; border-color: #F44336; }

.wr-statut.is-actif.est-open .wr-statut__icone    { background: #C8E6C9; color: #2E7D32; }
.wr-statut.is-actif.est-ecoute .wr-statut__icone  { background: #FFE0B2; color: #E65100; }
.wr-statut.is-actif.est-offline .wr-statut__icone { background: #F8BBD0; color: #C62828; }

.wr-statut.is-actif.est-open .wr-statut__coche    { background: #4CAF50; border-color: #4CAF50; }
.wr-statut.is-actif.est-ecoute .wr-statut__coche  { background: #FF9800; border-color: #FF9800; }
.wr-statut.is-actif.est-offline .wr-statut__coche { background: #F44336; border-color: #F44336; }

/* Pendant l'enregistrement en arrière-plan : on montre que ça travaille,
   sans bloquer. Le clic suivant est ignoré par le script, pas par le CSS. */
.wr-statut.est-envoi .wr-statut__btn { opacity: .6; }

.wr-statut__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
}

.wr-statut__icone {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--wr-bg, #F7F8FC);
  color: var(--wr-ink, #1E1B2E);
}
.wr-statut__icone svg { width: 18px; height: 18px; }

/* La règle par statut ci-dessous fixe la couleur ; celle-ci ne servait
   qu'à l'ancienne version à couleur unique. */

.wr-statut__coche {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--wr-line, #EEF1F7);
  color: #fff;
}
/* ⚠️  LA COCHE EST DANS LE HTML, MASQUÉE PAR DÉFAUT.

   Elle existe sur les trois cartes pour que le script n'ait qu'à basculer
   une classe — créer et détruire du balisage au clic produirait un
   scintillement, et laisserait le repli sans JavaScript sans repère. */
.wr-statut__coche svg { width: 13px; height: 13px; opacity: 0; }
.wr-statut.is-actif .wr-statut__coche svg { opacity: 1; }



.wr-statut__titre {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--wr-ink, #1E1B2E);
}

.wr-statut__texte {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wr-muted, #6B7280);
}

/* Trois colonnes deviennent illisibles sous 720 px : le titre passe sur
   quatre lignes. On empile. */
@media (max-width: 720px) {
  .wr-statuts { grid-template-columns: 1fr; }
  .wr-statut__btn { flex-direction: row; align-items: center; gap: 12px; }
  .wr-statut__head { width: auto; margin: 0; }
  .wr-statut__texte { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS — coin bas droit (wr-notif.js)
   ══════════════════════════════════════════════════════════════════════ */
.wr-notifs {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  /* ⚠️  LE CONTENEUR NE DOIT PAS INTERCEPTER LES CLICS.

     Il couvre un coin de l'écran en permanence, même vide. Sans
     `pointer-events: none`, il rendrait inutilisable ce qui se trouve
     dessous — un bouton d'action, un lien de pied de page. */
  pointer-events: none;
}

.wr-notif {
  padding: 11px 16px;
  border-radius: var(--wr-r-md, 12px);
  background: #1E1B2E;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

  /* Entrée par la droite. `translateX` et non `right` : la première est
     animée par le compositeur, la seconde force un recalcul de mise en
     page à chaque image. */
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .2s ease, transform .2s ease;
}

.wr-notif.est-visible { opacity: 1; transform: none; }

.wr-notif.est-erreur { background: var(--wr-danger, #EF4444); }

/* ⚠️  RESPECTER LE RÉGLAGE SYSTÈME.

   Un mouvement, même bref, peut déclencher un malaise chez les personnes
   sensibles au mouvement. On garde l'apparition, on retire le glissement. */
@media (prefers-reduced-motion: reduce) {
  .wr-notif { transition: opacity .2s ease; transform: none; }
}

/* Sur mobile, la notification occupe la largeur : à 13 px, un bandeau de
   200 px collé au bord droit se lit mal. */
@media (max-width: 520px) {
  .wr-notifs { left: 14px; right: 14px; bottom: 14px; }
  .wr-notif { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MON ABONNEMENT   /app/recruteur/abonnement

   ⚠️  `.wr-table` ÉTAIT UTILISÉE SANS EXISTER.

       `wr-mobile.css` définit `.wr-table-wrap { overflow-x: auto }` — le
       défilement horizontal sur petit écran — mais la table elle-même
       n'avait aucune règle. Elle s'affichait donc avec le style par défaut
       du navigateur : bordures doubles, cellules collées, alignements
       hérités de 1996. Une classe employée sans règle ne casse rien et ne
       fait rien, c'est ce qui la rend difficile à repérer.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wr-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wr-line-2);
  color: var(--wr-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.wr-table td {
  padding: 12px;
  border-bottom: 1px solid var(--wr-line);
  color: var(--wr-ink-2);
  vertical-align: middle;
}

.wr-table tr:last-child td { border-bottom: 0; }

/* ── Les caractéristiques de l'abonnement ──
   Deux colonnes : libellé à gauche, valeur à droite. Une table aurait
   suggéré qu'on peut trier ou sélectionner ; ce n'est ni l'un ni l'autre. */
.wr-abo-dl {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: 14px;
}

.wr-abo-dl dt {
  color: var(--wr-muted);
  font-size: 13px;
}

.wr-abo-dl dd {
  margin: 0;
  color: var(--wr-ink);
  font-weight: 550;
  min-width: 0;
}

/* ⚠️  UNE SEULE COLONNE SOUS 520 px.

   Un libellé long et une date sur la même ligne étroite se chevauchent : la
   valeur passe sous le libellé plutôt que de déborder. */
@media (max-width: 520px) {
  .wr-abo-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .wr-abo-dl dd { margin-bottom: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MON ABONNEMENT — formule en cours, premium, avantages

   Sans abonnement : deux cartes côte à côte, la formule gratuite (ce
   qu'on a) et le premium (ce qu'on aurait), en violet. Abonné : une
   carte d'état avec ses chiffres en tuiles, puis ses avantages.
   ══════════════════════════════════════════════════════════════════════ */
.wr-abo { max-width: 1040px; }

.wr-abo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}

.wr-abo-card {
  background: var(--wr-card);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-r-2xl);
  box-shadow: var(--wr-shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.wr-abo__grid > .wr-abo-card { margin-bottom: 0; display: flex; flex-direction: column; }

/* Le bas de la carte gratuite, aligné sur celui du premium : sans lui, la
   carte de gauche finissait sur un grand vide. */
.wr-abo-card__foot { margin-top: auto; padding-top: 22px; }
.wr-abo-here {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--wr-r-pill);
  border: 1px dashed var(--wr-line-2);
  color: var(--wr-muted);
  font-size: 13px;
  font-weight: 650;
}
.wr-abo-here svg { width: 14px; height: 14px; color: var(--wr-acc-green-fg); }

.wr-abo-card--premium {
  position: relative;
  overflow: hidden;
  border-color: rgba(138, 99, 193, .28);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(138, 99, 193, .10) 0%, rgba(138, 99, 193, 0) 55%),
    var(--wr-card);
}

.wr-abo-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.wr-abo-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-abo-card__icon svg { width: 24px; height: 24px; }
.wr-abo-card__icon--premium {
  background: linear-gradient(135deg, #A98AD3 0%, #8A63C1 55%, #6B47A6 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(107, 71, 166, .55);
}

.wr-abo-card__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }

.wr-abo-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wr-muted);
}

.wr-abo-card__name {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink);
  line-height: 1.15;
}

.wr-abo-card__subtitle {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--wr-ink);
}

.wr-abo-card__text {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wr-ink-2);
}

.wr-abo-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-bg-2);
  color: var(--wr-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.wr-abo-pill--success { background: var(--wr-acc-green); color: var(--wr-acc-green-fg); }
.wr-abo-pill--warning { background: var(--wr-acc-yellow); color: var(--wr-acc-yellow-fg); white-space: normal; }

/* ── Les listes à coches ── */
.wr-abo-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--wr-line);
  display: grid;
  gap: 11px;
}
.wr-abo-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--wr-ink-2);
  line-height: 1.45;
}
.wr-abo-list__check,
.wr-abo-perks__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wr-acc-green);
  color: var(--wr-acc-green-fg);
  margin-top: 1px;
}
.wr-abo-list__check svg,
.wr-abo-perks__check svg { width: 11px; height: 11px; }

.wr-abo-list--chips {
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.wr-abo-list--chips li {
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--wr-r-lg);
  background: var(--wr-violet-softer);
  font-weight: 600;
  color: var(--wr-ink);
}

/* ── Le premium, à côté de la formule gratuite ── */
.wr-abo-upsell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: var(--wr-r-2xl);
  color: #fff;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #9B76CF 0%, #8A63C1 45%, #5E3D96 100%);
  box-shadow: 0 18px 40px -18px rgba(94, 61, 150, .65);
}

.wr-abo-upsell__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--wr-r-pill);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wr-abo-upsell__name {
  margin: 12px 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.wr-abo-upsell__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.wr-abo-upsell__amount { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.wr-abo-upsell__old { font-size: 17px; font-weight: 600; opacity: .65; text-decoration: line-through; }
.wr-abo-upsell__per { font-size: 14px; opacity: .85; }

.wr-abo-upsell__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
}

.wr-abo-perks {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
  display: grid;
  gap: 13px;
  flex: 1;
}
.wr-abo-perks li { display: flex; gap: 11px; align-items: flex-start; }
.wr-abo-perks li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.wr-abo-perks strong { font-size: 14px; font-weight: 700; }
.wr-abo-perks em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.wr-abo-perks__check { background: rgba(255, 255, 255, .95); color: var(--wr-violet-dark); }

.wr-abo-upsell__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 22px;
}

.wr-abo-upsell__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--wr-r-pill);
  background: #fff;
  color: var(--wr-violet-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px -6px rgba(30, 27, 46, .35);
  transition: transform var(--wr-t), box-shadow var(--wr-t);
}
.wr-abo-upsell__cta svg { width: 16px; height: 16px; transition: transform var(--wr-t); }
.wr-abo-upsell__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(30, 27, 46, .45); }
.wr-abo-upsell__cta:hover svg { transform: translateX(2px); }
.wr-abo-upsell__cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

.wr-abo-upsell__note { font-size: 12.5px; color: rgba(255, 255, 255, .8); }

/* ── Abonné : les chiffres en tuiles ── */
.wr-abo-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.wr-abo-fact {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--wr-r-lg);
  background: var(--wr-card);
  border: 1px solid var(--wr-line-2);
}
.wr-abo-fact__label { font-size: 12px; color: var(--wr-muted); font-weight: 600; }
.wr-abo-fact__value { font-size: 17px; font-weight: 750; color: var(--wr-ink); letter-spacing: -.01em; }
.wr-abo-fact__value small { font-size: 13px; font-weight: 500; color: var(--wr-muted); }

.wr-abo-manage {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--wr-line);
}
.wr-abo-manage .wr-btn { flex: none; }
.wr-abo-manage__hint {
  flex: 1 1 280px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wr-muted);
}

@media (max-width: 860px) {
  .wr-abo__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .wr-abo-card { padding: 18px 16px; }
  /* Le statut passe sous le titre : à côté, il écrasait « Votre formule
     actuelle » sur trois lignes. */
  .wr-abo-card__titles { flex: 1 1 calc(100% - 62px); }
  .wr-abo-card__head .wr-abo-pill { margin-left: 62px; }
  .wr-abo-upsell { padding: 22px 18px 20px; }
  .wr-abo-card__name { font-size: 21px; }
  .wr-abo-upsell__amount { font-size: 30px; }
  .wr-abo-upsell__cta { width: 100%; justify-content: center; }
}

/* ⚠️  LE CADENAS SE POSE À DROITE, ET IL NE PREND PAS LA PLACE DU LIBELLÉ.

   `margin-left: auto` le pousse au bout de la ligne, comme la pastille de
   compteur juste à côté. Sans lui, il se colle au texte et l'on croit à une
   icône de section plutôt qu'à un état. */
.wr-side__lock {
  width: 13px;
  height: 13px;
  flex: none;
  margin-left: auto;
  opacity: .55;
}

/* Le libellé pour les lecteurs d'écran : le cadenas seul ne dit rien à qui
   ne le voit pas. */
.wr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA FICHE D'UN CANDIDAT — espace entreprise
   ══════════════════════════════════════════════════════════════════════════ */
.wr-cand__top { margin-bottom: 12px; }

.wr-cand__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  margin-bottom: 16px;
}

.wr-cand__id { display: flex; align-items: center; gap: 16px; min-width: 0; }

.wr-cand__avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.wr-cand__avatar--ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1);
  font-weight: 700; font-size: 20px;
}

.wr-cand__name { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.wr-cand__job { margin: 2px 0 0; font-size: 15px; color: var(--wr-violet, #8A63C1); font-weight: 600; }
.wr-cand__meta { margin: 6px 0 0; font-size: 13.5px; color: var(--wr-muted, #6B7280); }

.wr-cand__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.wr-cand__actions form { margin: 0; }
.wr-cand__actions .is-liked { color: #B42318; border-color: #F3C6C2; background: #FEF3F2; }

.wr-cand__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 16px;
  align-items: start;
}

.wr-cand__main {
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  padding: 20px 22px;
}

.wr-cand__aside { position: sticky; top: 16px; }

.wr-cand__pdf {
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 14px;
  overflow: hidden;
  background: #F5F6FA;
  aspect-ratio: 210 / 297;
}

/* L'aperçu verrouillé : même encombrement que le PDF, pour que la page ne
   saute pas quand l'abonnement s'active. */
.wr-cand__pdf--verrouille {
  display: grid; place-items: center; gap: 10px;
  padding: 28px 20px; text-align: center;
  color: var(--wr-muted, #6B7280);
}
.wr-cand__pdf--verrouille svg { width: 28px; height: 28px; }
.wr-cand__pdf--verrouille p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 26ch; }

.wr-cand__pdf iframe { width: 100%; height: 100%; border: 0; display: block; }

.wr-cand__empty { color: var(--wr-muted, #6B7280); font-size: 14px; margin: 0; padding: 14px 0; }

@media (max-width: 960px) {
  .wr-cand__grid { grid-template-columns: minmax(0, 1fr); }
  .wr-cand__aside { position: static; }
  .wr-cand__head { flex-direction: column; }
  .wr-cand__actions { justify-content: flex-start; }
}

/* ── Les entreprises intéressées (tableau de bord candidat) ─────────────── */
.wr-interest__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.wr-interest__item { display: flex; align-items: center; gap: 12px; }
.wr-interest__logo {
  width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--wr-line, #EEF1F7);
}
.wr-interest__logo--ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wr-violet-soft, #F2EDFA); color: var(--wr-violet, #8A63C1); font-weight: 700; border: 0;
}
.wr-interest__body { display: flex; flex-direction: column; min-width: 0; }
.wr-interest__name { font-weight: 600; color: var(--wr-ink, #1E1B2E); text-decoration: none; }
.wr-interest__name:hover { color: var(--wr-violet, #8A63C1); }
.wr-interest__meta { font-size: 12.5px; color: var(--wr-muted, #6B7280); }




/* Liste grisée (« Autre ville » actif) : visible, inerte. */
.wr-rs.is-disabled .wr-rs__btn { opacity: .55; cursor: not-allowed; background: var(--wr-bg, #FBFCFE); }

/* ══════════════════════════════════════════════════════════════════════════
   BANDEAU DE VÉRIFICATION  (partials/wr-verif-entreprise.ejs)
   ══════════════════════════════════════════════════════════════════════════ */
.wr-verif { margin-bottom: 18px; }

/* L'explication est secondaire : on la lit après le délai, pas avant. Un
   bloc de trois lignes toutes au même poids se lit en diagonale. */
.wr-verif__why {
  display: block; margin-top: 6px;
  font-size: 13px; line-height: 1.55; opacity: .85;
}

.wr-verif__lien {
  display: inline-block; margin-top: 8px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: inherit; border-bottom: 1px solid currentColor;
}
.wr-verif__lien:hover { opacity: .75; color: inherit; }

/* ══════════════════════════════════════════════════════════════════════
   TABLEAU DE BORD CANDIDAT — ANALYSE IA ET CV VIDÉO
   (partials/wr-dash-ia.ejs, partials/wr-dash-video.ejs)

   Les deux cartes de l'app mobile. Mêmes couleurs de jauge que l'app :
   vert ≥ 75, orange ≥ 50, rouge en dessous.
   ══════════════════════════════════════════════════════════════════════ */

.wr-ia__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.wr-ia__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--wr-r-sm);
  background: var(--wr-violet-soft); color: var(--wr-violet); flex-shrink: 0;
}
.wr-ia__title { margin: 0; }

.wr-ia__block {
  padding: 16px 18px; margin-bottom: 12px;
  border: 1px solid var(--wr-line); border-radius: var(--wr-r-lg); background: var(--wr-bg);
}
.wr-ia__subtitle { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--wr-ink); }

.wr-ia__scorehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.wr-ia__scorehead .wr-ia__subtitle { margin-bottom: 8px; }
.wr-ia__level {
  font-size: 12px; font-weight: 600; padding: 4px 10px; margin-bottom: 8px;
  border-radius: var(--wr-r-pill); background: var(--wr-acc-violet); color: var(--wr-acc-violet-fg);
}

.wr-ia__score { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: 12px; padding: 6px 0; }
.wr-ia__score-label { font-size: 13px; color: var(--wr-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-ia__track { height: 8px; border-radius: var(--wr-r-pill); background: var(--wr-line-2); overflow: hidden; }
.wr-ia__fill { display: block; height: 100%; border-radius: inherit; }
.wr-ia__fill--bon { background: #16A34A; }
.wr-ia__fill--moyen { background: var(--wr-warning); }
.wr-ia__fill--faible { background: #E5484D; }
.wr-ia__score-value { font-size: 13px; font-weight: 700; color: var(--wr-ink); text-align: right; }

/* Le résumé replié : quatre lignes, puis « Lire la suite ». */
.wr-ia__toggle { position: absolute; opacity: 0; pointer-events: none; }
.wr-ia__text {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--wr-ink-2); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.wr-ia__text--long { -webkit-line-clamp: 5; }
.wr-ia__toggle:checked ~ .wr-ia__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.wr-ia__more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--wr-violet); cursor: pointer; }
.wr-ia__more:hover { color: var(--wr-violet-dark); }
.wr-ia__toggle:focus-visible ~ .wr-ia__more { outline: 2px solid var(--wr-violet); outline-offset: 2px; border-radius: 4px; }
.wr-ia__more-off,
.wr-ia__toggle:checked ~ .wr-ia__more .wr-ia__more-on { display: none; }
.wr-ia__toggle:checked ~ .wr-ia__more .wr-ia__more-off { display: inline; }

/* Les sections dépliables. */
.wr-ia__acc { border: 1px solid var(--wr-line); border-radius: var(--wr-r-lg); margin-bottom: 10px; background: var(--wr-card); }
.wr-ia__acc-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; color: var(--wr-ink);
}
.wr-ia__acc-head::-webkit-details-marker { display: none; }
.wr-ia__acc-head::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--wr-violet);
}
.wr-ia__acc--vert .wr-ia__acc-head::before { background: #16A34A; }
.wr-ia__acc--orange .wr-ia__acc-head::before { background: var(--wr-warning); }
.wr-ia__acc-title { flex: 1; }
.wr-ia__acc-count {
  font-size: 12px; font-weight: 700; min-width: 24px; text-align: center; padding: 2px 8px;
  border-radius: var(--wr-r-pill); background: var(--wr-bg-2); color: var(--wr-muted);
}
.wr-ia__acc-chevron { color: var(--wr-muted); transition: transform var(--wr-t); }
.wr-ia__acc[open] .wr-ia__acc-chevron { transform: rotate(180deg); }
.wr-ia__acc-head:focus-visible { outline: 2px solid var(--wr-violet); outline-offset: -2px; border-radius: var(--wr-r-lg); }

.wr-ia__items { list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.wr-ia__item { display: flex; gap: 12px; align-items: flex-start; }
.wr-ia__mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700;
  background: var(--wr-acc-violet); color: var(--wr-acc-violet-fg);
}
.wr-ia__acc--vert .wr-ia__mark { background: #DCFCE7; color: #16A34A; }
.wr-ia__acc--orange .wr-ia__mark { background: var(--wr-acc-yellow); color: var(--wr-acc-yellow-fg); }
.wr-ia__item-title { display: block; font-size: 14px; color: var(--wr-ink); margin-bottom: 2px; }
.wr-ia__item-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--wr-ink-2); }

.wr-ia__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wr-ia__chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 11px;
  border-radius: var(--wr-r-pill); background: var(--wr-violet-soft); color: var(--wr-violet-dark);
}

/* Les états : en cours, échec, invitation. */
.wr-ia__state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 26px 18px; border: 1px dashed var(--wr-line-2); border-radius: var(--wr-r-lg); background: var(--wr-bg);
}
.wr-ia__state--link { text-decoration: none; color: inherit; transition: border-color var(--wr-t), background var(--wr-t); }
.wr-ia__state--link:hover { border-color: var(--wr-violet-2); background: var(--wr-violet-softer); }
.wr-ia__state-title { margin: 0; font-weight: 700; font-size: 15px; color: var(--wr-ink); }
.wr-ia__state-text { margin: 0 0 6px; font-size: 13.5px; max-width: 46ch; }
.wr-ia__state-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--wr-violet-soft); color: var(--wr-violet); font-size: 18px; font-weight: 700;
}
.wr-ia__state-icon--echec { background: #FEE2E2; color: #E5484D; }
.wr-ia__spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--wr-violet-soft); border-top-color: var(--wr-violet);
  animation: wr-ia-tourne .9s linear infinite;
}
@keyframes wr-ia-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wr-ia__spinner { animation-duration: 3s; } }

/* ── CV vidéo ── */
.wr-vid__desc { margin: -6px 0 16px; font-size: 13.5px; }

.wr-vid__radio { position: absolute; opacity: 0; pointer-events: none; }
.wr-vid__tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  border-radius: var(--wr-r-md); background: var(--wr-bg-2); max-width: 100%; overflow-x: auto;
}
.wr-vid__tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: var(--wr-r-sm); font-size: 13px; font-weight: 600; color: var(--wr-muted);
  cursor: pointer; white-space: nowrap; transition: background var(--wr-t), color var(--wr-t);
}
.wr-vid__tab:hover { color: var(--wr-ink); }
.wr-vid__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wr-success); }

.wr-vid__radio--fr:checked ~ .wr-vid__tabs .wr-vid__tab--fr,
.wr-vid__radio--en:checked ~ .wr-vid__tabs .wr-vid__tab--en,
.wr-vid__radio--default:checked ~ .wr-vid__tabs .wr-vid__tab--default {
  background: var(--wr-card); color: var(--wr-violet-dark); box-shadow: var(--wr-shadow);
}
.wr-vid__radio--fr:focus-visible ~ .wr-vid__tabs .wr-vid__tab--fr,
.wr-vid__radio--en:focus-visible ~ .wr-vid__tabs .wr-vid__tab--en,
.wr-vid__radio--default:focus-visible ~ .wr-vid__tabs .wr-vid__tab--default { outline: 2px solid var(--wr-violet); outline-offset: 1px; }

.wr-vid__panel { display: none; }
.wr-vid__radio--fr:checked ~ .wr-vid__panels .wr-vid__panel--fr,
.wr-vid__radio--en:checked ~ .wr-vid__panels .wr-vid__panel--en,
.wr-vid__radio--default:checked ~ .wr-vid__panels .wr-vid__panel--default { display: block; }

.wr-vid__form { display: flex; gap: 10px; align-items: center; }
.wr-vid__input { flex: 1; min-width: 0; }
.wr-vid__form .wr-btn { flex-shrink: 0; }

/* YouTube obligatoire — dit avant le champ, en rouge YouTube discret. */
.wr-vid__yt {
  display: inline-flex; align-items: center; gap: 7px;
  margin: -6px 0 14px; padding: 5px 10px;
  border-radius: var(--wr-r-pill);
  background: #FEF2F2; color: #B91C1C;
  font-size: 12.5px; font-weight: 600;
}
.wr-vid__yt svg { width: 16px; height: 16px; flex: none; color: #FF0000; }

.wr-vid__status { margin: 8px 0 0; font-size: 13px; color: var(--wr-success); min-height: 0; }
.wr-vid__status:empty { display: none; }
.wr-vid__status.is-error { color: var(--wr-danger); }

.wr-vid__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wr-vid__actions[hidden], .wr-vid__empty[hidden], .wr-vid__player[hidden], .wr-vid__actions [hidden] { display: none; }
.wr-vid__empty { margin: 12px 0 0; font-size: 13px; }

.wr-vid__player {
  margin-top: 14px; border-radius: var(--wr-r-lg); overflow: hidden; background: #000;
  aspect-ratio: 16 / 9;
}
.wr-vid__player iframe, .wr-vid__player video { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 560px) {
  .wr-vid__form { flex-direction: column; align-items: stretch; }
  .wr-ia__score { grid-template-columns: 60px 1fr 30px; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CANDIDATURES REÇUES — rang, offre visée, CV, état « dans le suivi »
   ══════════════════════════════════════════════════════════════════════════ */
.wr-recu__when {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.wr-recu__rank {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-acc-blue);
  color: var(--wr-acc-blue-fg);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.wr-recu__for {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-size: 12.5px;
  font-weight: 600;
}
.wr-recu__for svg { width: 13px; height: 13px; flex: none; }

/* Le CV : le document principal de la candidature — un liseré violet le
   distingue de la pièce jointe, à côté. */
.wr-recu__cv { border-color: var(--wr-violet-2); color: var(--wr-violet-dark); }
.wr-recu__cv svg { color: var(--wr-violet); }

.wr-recu__board { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wr-recu__board form[hidden],
.wr-recu__board [data-board-done][hidden] { display: none; }
.wr-recu__boarddone { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wr-recu__boarderr { margin: 0; font-size: 12px; color: var(--wr-danger); text-align: right; }
.wr-recu__boarderr[hidden] { display: none; }

/* « ✓ Dans le suivi » — vert, plein : c'est fait, ce n'est plus un bouton
   à presser (un <span>, pas un <button>). */
.wr-btn--done {
  background: var(--wr-acc-green);
  border-color: #A7F3D0;
  color: var(--wr-acc-green-fg);
  cursor: default;
}
.wr-btn--done svg { width: 14px; height: 14px; }
.wr-recu__boarddone.is-new .wr-btn--done { animation: wr-done-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes wr-done-pop {
  0% { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-recu__boarddone.is-new .wr-btn--done { animation: none; }
}

@media (max-width: 520px) {
  .wr-recu__when { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding-left: 44px; }
  .wr-recu__when .wr-recu__date { width: auto; padding-left: 0; }
  .wr-recu__board { align-items: flex-start; width: 100%; }
  .wr-recu__boarderr { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUIVI DES CANDIDATS — documents de la candidature sur la carte
   ══════════════════════════════════════════════════════════════════════════ */
.wr-ccard__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.wr-ccard__doc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--wr-line-2);
  border-radius: 7px;
  background: #fff;
  color: var(--wr-ink-2);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--wr-t), color var(--wr-t), background var(--wr-t);
}
.wr-ccard__doc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.wr-ccard__doc svg { width: 12px; height: 12px; flex: none; color: var(--wr-violet); }
.wr-ccard__doc:hover { border-color: var(--wr-violet-2); color: var(--wr-violet-dark); background: var(--wr-violet-softer); }

.wr-ccard__applied { display: inline-flex; align-items: center; gap: 4px; color: var(--wr-acc-green-fg); font-weight: 600; }
.wr-ccard__applied svg { width: 11px; height: 11px; flex: none; }

/* Lien direct (?carte=ID) : la carte s'allume un instant. */
.wr-ccard.is-flash { animation: wr-ccard-flash 2.4s ease; }
@keyframes wr-ccard-flash {
  0%, 60% { border-color: var(--wr-violet); box-shadow: 0 0 0 4px rgba(138, 99, 193, .22); }
  100% { box-shadow: 0 1px 2px rgba(30, 27, 46, .05); }
}

/* La candidature, en tête de fiche */
.wr-cedit__app {
  border: 1px solid #CDEFE0;
  border-radius: 14px;
  background: #F6FDF9;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}
.wr-cedit__app[hidden],
.wr-cedit__app [hidden] { display: none; }
.wr-cedit__apphead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wr-cedit__apptitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wr-acc-green-fg);
}
.wr-cedit__apptitle svg { width: 15px; height: 15px; }
.wr-cedit__appdate { font-size: 12px; color: var(--wr-muted); }
.wr-cedit__appcount {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--wr-r-pill);
  background: var(--wr-acc-blue);
  color: var(--wr-acc-blue-fg);
  font-size: 11px;
  font-weight: 700;
}
.wr-cedit__appfor { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--wr-violet-dark); }
.wr-cedit__appmsg {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--wr-success);
  border-radius: 0 10px 10px 0;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wr-ink-2);
  white-space: pre-line;
  max-height: 220px;
  overflow: auto;
}
.wr-cedit__appdoc {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--wr-line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--wr-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.wr-cedit__appdoc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-cedit__appdoc svg { width: 14px; height: 14px; flex: none; color: var(--wr-violet); }
.wr-cedit__appdoc:hover { border-color: var(--wr-violet-2); color: var(--wr-violet-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   VISIONNEUSE DE DOCUMENTS   <dialog class="wr-docview">
   ══════════════════════════════════════════════════════════════════════════ */
.wr-docview {
  /* Centrée : la remise à zéro du site (`margin: 0`) collait les <dialog>
     en haut à gauche. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(960px, calc(100vw - 32px));
  height: min(92vh, 1100px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--wr-card);
  box-shadow: 0 30px 80px rgba(30, 27, 46, .35);
  overflow: hidden;
}
.wr-docview::backdrop { background: rgba(30, 27, 46, .55); backdrop-filter: blur(2px); }
.wr-docview__box { display: flex; flex-direction: column; height: 100%; }
.wr-docview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--wr-line);
}
.wr-docview__ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
}
.wr-docview__ico svg { width: 16px; height: 16px; }
.wr-docview__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--wr-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-docview__open svg { width: 14px; height: 14px; }
.wr-docview__x {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--wr-muted);
  cursor: pointer;
}
.wr-docview__x:hover { background: var(--wr-bg-2); color: var(--wr-ink); }
.wr-docview__x svg { width: 18px; height: 18px; }
.wr-docview__body { position: relative; flex: 1; background: #E9EBF0; }
.wr-docview__loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  font-size: 13px;
  color: var(--wr-muted);
}
.wr-docview__loading[hidden] { display: none; }
/* Le cadre est transparent tant que rien n'y est peint : le message
   dessous (« Chargement… », puis l'invitation à ouvrir dans un onglet)
   reste lisible si le navigateur ne sait pas afficher le PDF. */
.wr-docview__frame { position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.wr-docview__loading { padding: 24px; text-align: center; line-height: 1.6; }
.wr-docview__loading a { color: var(--wr-violet); font-weight: 700; }
@media (max-width: 560px) {
  .wr-docview__open span { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALE PREMIUM   <dialog class="wr-pmodal">
   ══════════════════════════════════════════════════════════════════════════ */
.wr-pmodal {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--wr-card);
  box-shadow: 0 30px 80px rgba(30, 27, 46, .35);
  overflow: auto;
}
.wr-pmodal::backdrop { background: rgba(30, 27, 46, .55); backdrop-filter: blur(3px); }
.wr-pmodal.is-open { animation: wr-pmodal-in .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes wr-pmodal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .wr-pmodal.is-open { animation: none; } }

.wr-pmodal__box { position: relative; }
.wr-pmodal__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  color: var(--wr-ink-2);
  cursor: pointer;
}
.wr-pmodal__x:hover { background: #fff; }
.wr-pmodal__x svg { width: 18px; height: 18px; }

.wr-pmodal__hero {
  padding: 26px 26px 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(169, 138, 211, .35) 0%, transparent 60%),
    linear-gradient(160deg, #F8F4FD 0%, #F2EDFA 100%);
  border-bottom: 1px solid #EEE7F5;
}
.wr-pmodal__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--wr-r-pill);
  background: linear-gradient(135deg, var(--wr-violet) 0%, var(--wr-violet-dark) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(138, 99, 193, .35);
}
.wr-pmodal__pill svg { width: 12px; height: 12px; }
.wr-pmodal__title {
  margin: 14px 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--wr-ink);
  padding-right: 30px;
}
.wr-pmodal__lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wr-ink-2); }

/* L'aperçu flouté de l'analyse IA */
.wr-pmodal__preview {
  position: relative;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #E7DDF5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(138, 99, 193, .12);
  overflow: hidden;
}
.wr-pmodal__pvhead {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wr-violet);
}
.wr-pmodal__pvdot { width: 8px; height: 8px; border-radius: 50%; background: var(--wr-violet); box-shadow: 0 0 0 4px var(--wr-violet-soft); }
.wr-pmodal__pvlines { display: grid; gap: 7px; margin: 12px 0 14px; filter: blur(1.5px); }
.wr-pmodal__pvlines span { display: block; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #E9E1F6, #F3EEFA); }
.wr-pmodal__pvscores { display: grid; gap: 7px; filter: blur(1px); }
.wr-pmodal__pvscores span { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; }
.wr-pmodal__pvscores em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--wr-muted); }
.wr-pmodal__pvscores i { position: relative; height: 7px; border-radius: 6px; background: var(--wr-bg-2); overflow: hidden; }
.wr-pmodal__pvscores i::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 70%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--wr-violet-2), var(--wr-violet));
}
.wr-pmodal__pvlock {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -40%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--wr-violet);
  box-shadow: 0 8px 24px rgba(30, 27, 46, .18);
}
.wr-pmodal__pvlock svg { width: 20px; height: 20px; }

.wr-pmodal__perks { list-style: none; margin: 0; padding: 20px 26px 6px; display: grid; gap: 16px; }
.wr-pmodal__perks li { display: flex; gap: 14px; align-items: flex-start; }
.wr-pmodal__perks strong { display: block; font-size: 14.5px; color: var(--wr-ink); }
.wr-pmodal__perks em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--wr-muted); }
.wr-pmodal__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
}
.wr-pmodal__ico svg { width: 19px; height: 19px; }
.wr-pmodal__ico--ai { background: var(--wr-acc-violet); color: var(--wr-acc-violet-fg); }
.wr-pmodal__ico--cv { background: var(--wr-acc-blue); color: var(--wr-acc-blue-fg); }
.wr-pmodal__ico--msg { background: var(--wr-acc-green); color: var(--wr-acc-green-fg); }

.wr-pmodal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--wr-line);
}
.wr-pmodal__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.wr-pmodal__price s { font-size: 13px; color: var(--wr-muted-2); }
.wr-pmodal__price strong { font-size: 22px; font-weight: 800; color: var(--wr-ink); }
.wr-pmodal__price span { font-size: 13px; color: var(--wr-muted); }
.wr-pmodal__price small { flex-basis: 100%; font-size: 11.5px; color: var(--wr-muted); }
.wr-pmodal__actions { display: flex; gap: 8px; margin-left: auto; }
.wr-pmodal__cta svg { transition: transform var(--wr-t); }
.wr-pmodal__cta:hover svg { transform: translateX(3px); }

/* Petit écran : l'aperçu (décoratif) laisse la place aux actions. */
@media (max-width: 520px), (max-height: 760px) {
  .wr-pmodal__preview { display: none; }
}
@media (max-width: 520px) {
  .wr-pmodal__hero { padding: 22px 18px 18px; }
  .wr-pmodal__perks { padding: 18px 18px 4px; }
  .wr-pmodal__foot { padding: 14px 18px 18px; }
  .wr-pmodal__actions { width: 100%; }
  .wr-pmodal__actions .wr-btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE « CV VIDÉO »   /app/candidat/video
   ══════════════════════════════════════════════════════════════════════════ */
.wr-vidpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.wr-vidpage__side { display: grid; gap: 16px; }
.wr-vidpage__h { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--wr-ink); }
.wr-vidpage__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.wr-vidpage__steps li { position: relative; padding-left: 38px; counter-increment: etape; }
.wr-vidpage__steps li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wr-violet-soft); color: var(--wr-violet-dark);
  font-size: 12.5px; font-weight: 800;
}
.wr-vidpage__steps strong { display: block; font-size: 13.5px; color: var(--wr-ink); }
.wr-vidpage__steps span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--wr-muted); }
.wr-vidpage__p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--wr-ink-2); }
.wr-vidpage__p--muted { margin: 0; color: var(--wr-muted); font-size: 12.5px; }
.wr-vidpage__state {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--wr-r-pill);
  background: var(--wr-bg-2); color: var(--wr-muted);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.wr-vidpage__statedot { width: 8px; height: 8px; border-radius: 50%; background: var(--wr-muted-2); }
.wr-vidpage__state.is-on { background: var(--wr-acc-green); color: var(--wr-acc-green-fg); }
.wr-vidpage__state.is-on .wr-vidpage__statedot { background: var(--wr-success); box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
@media (max-width: 960px) {
  .wr-vidpage { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   « VOIR LA VIDÉO » — boutons d'un profil (public, recruteur) + lecteur
   ══════════════════════════════════════════════════════════════════════════ */
.wr-vbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-vbtn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 8px;
  border: 1px solid #FECACA;
  border-radius: var(--wr-r-pill);
  background: #fff;
  color: var(--wr-ink);
  font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--wr-t), box-shadow var(--wr-t), transform var(--wr-t);
}
.wr-vbtn:hover { border-color: #F87171; box-shadow: 0 6px 16px rgba(255, 0, 0, .12); transform: translateY(-1px); }
.wr-vbtn__play {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FF0000; color: #fff;
}
.wr-vbtn__play svg { width: 12px; height: 12px; margin-left: 2px; }
.wr-vbtn__lang {
  padding: 2px 7px; border-radius: 6px;
  background: var(--wr-bg-2); color: var(--wr-muted);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.wr-vbtn--locked { border-style: dashed; border-color: var(--wr-line-2); color: var(--wr-muted); }
.wr-vbtn--locked .wr-vbtn__play { background: var(--wr-bg-2); color: var(--wr-muted); }
.wr-vbtn--locked:hover { border-color: var(--wr-violet-2); box-shadow: none; color: var(--wr-violet); }

.wr-vplayer {
  position: fixed; inset: 0; margin: auto;
  width: min(960px, calc(100vw - 32px));
  height: fit-content;
  max-width: none; max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 18px;
  background: #0B0B0F;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.wr-vplayer::backdrop { background: rgba(15, 12, 24, .75); backdrop-filter: blur(3px); }
.wr-vplayer__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; color: #fff; }
.wr-vplayer__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-vplayer__x {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.wr-vplayer__x:hover { background: rgba(255, 255, 255, .2); }
.wr-vplayer__x svg { width: 18px; height: 18px; }
.wr-vplayer__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }

/* ══════════════════════════════════════════════════════════════════════════
   LE HEADER EN VIOLET PASTEL

   La barre porte la couleur de la marque : un violet pastel, éclairé d'un
   halo blanc à gauche et d'un reflet rosé à droite pour qu'il ne soit pas
   plat, un filet violet un ton plus soutenu en bas, et une ombre violette
   douce dès qu'on défile (`.is-scrolled`, wr-header.js).

   ⚠️  LE CTA EST VIOLET PLEIN, TEXTE BLANC.

       Sur la barre pastel, c'est le seul aplat soutenu : « Créer mon CV
       gratuit » ressort sans être blanc (essayé, puis écarté). Le compte
       et les survols passent au blanc (le violet pâle des survols aurait
       disparu sur ce fond).

   ⚠️  INTER, 2 PX DE PLUS, ET AUCUNE TRANSITION.

       Une navigation « grande et épurée » : Inter (chargée avec Montserrat,
       wr.css), chaque texte de la barre 2 px plus grand qu'avant, du poids
       500 plutôt que du gras. Aucun effet animé : pas de pastille qui
       glisse sous les liens (masquée ici), pas de fondu au survol — le
       changement est immédiat.

   ⚠️  LES GRIS DEVIENNENT DES GRIS VIOLETS, PLUS SOMBRES.

       Le gris #6B7280 tombait sous le contraste lisible (≈ 4:1) sur le
       violet pastel : #5E5675 et #3B3355 restent au-dessus de 4,5:1.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-header {
  --wr-head-ink: #3B3355;
  --wr-head-muted: #5E5675;
  --wr-head-hover: rgba(255, 255, 255, .72);
  --wr-head-rule: rgba(107, 71, 166, .18);

  background:
    radial-gradient(620px 170px at 12% -60%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(520px 170px at 90% -70%, rgba(246, 214, 252, .6), transparent 70%),
    linear-gradient(180deg, rgba(239, 231, 252, .95), rgba(233, 223, 250, .95));
  border-bottom-color: transparent;
  font-family: 'Inter', var(--wr-font);
}
/* Aucun effet de transition dans la barre : boutons, liens, liste. */
.wr-header *,
.wr-header *::before,
.wr-header *::after { transition: none !important; animation: none !important; }
.wr-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, #DCCDF1 0%, #C9B2EA 50%, #DCCDF1 100%);
  pointer-events: none;
}
.wr-header.is-scrolled { box-shadow: 0 10px 30px rgba(107, 71, 166, .13); }

/* Les liens du menu : grands, poids 500, gris violet. Pas de pastille
   glissante ni de fond : au survol, la couleur et un trait léger sous le
   mot ; l'onglet actif garde son trait dégradé, plus épais. */
.wr-header .wr-nav { gap: 6px; }
.wr-header .wr-nav__link {
  color: var(--wr-head-ink);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 8px 12px;
}
.wr-header .wr-nav__link.is-active { font-weight: 600; color: var(--wr-violet-dark, #6B47A6); }
.wr-header .wr-nav__link:hover { background: transparent; color: var(--wr-violet-dark, #6B47A6); }
.wr-header .wr-nav__glisseur { display: none; }
.wr-header .wr-nav__link:not(.is-active):not(.wr-nav__link--cvfree):hover::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: rgba(107, 71, 166, .35);
}
.wr-nav__link.is-active::after {
  background: linear-gradient(90deg, var(--wr-violet, #8A63C1), #D946EF);
  height: 2.5px;
}
.wr-header .wr-nav__link.is-active::after { left: 12px; right: 12px; bottom: 2px; }
/* Entre la tablette et le petit portable, la barre est juste : on resserre
   les liens plutôt que de les laisser déborder (testé en allemand). */
@media (max-width: 1100px) {
  .wr-header .wr-nav__link { padding-inline: 9px; }
  .wr-header .wr-nav__link:not(.is-active):not(.wr-nav__link--cvfree):hover::after,
  .wr-header .wr-nav__link.is-active::after { left: 9px; right: 9px; }
  .wr-header .wr-nav__link--cvfree { padding-inline: 14px; }
}

/* « Créer mon CV gratuit » : VIOLET PLEIN, TEXTE BLANC — le seul aplat
   soutenu de la barre pastel, c'est ce qui le met en avant (contraste du
   blanc sur #8A63C1 ≈ 4,6:1). Survol : le violet foncé, sans transition. */
.wr-header .wr-nav__link--cvfree {
  background: var(--wr-violet, #8A63C1);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  border: 1px solid var(--wr-violet, #8A63C1);
  padding: 9px 18px;
  box-shadow: 0 4px 12px rgba(107, 71, 166, .25);
}
.wr-header .wr-nav__link--cvfree:hover {
  background: var(--wr-violet-dark, #6B47A6);
  border-color: var(--wr-violet-dark, #6B47A6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(107, 71, 166, .3);
}

/* « Mon espace candidat / entreprise » : violet pastel un ton plus
   soutenu que la barre, pour rester une pilule et pas un trou. */
.wr-header .wr-head__dash {
  background: #E4D7F7;
  border-color: #D3BFEF;
  color: var(--wr-violet-dark, #6B47A6);
  font-size: 15px;
}
.wr-header .wr-head__dash:hover { background: #fff; border-color: #fff; }

/* Les plateformes sœurs : texte gris violet, survol blanc. */
.wr-header .wr-head__extlink { color: var(--wr-head-muted); font-size: 14.5px; font-weight: 500; }
.wr-header .wr-head__extlink:hover { background: var(--wr-head-hover); color: var(--wr-violet-dark, #6B47A6); }

/* « Se connecter » : léger — du texte, une icône, un fond blanc au survol. */
.wr-head__login {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-radius: 100px;
  color: var(--wr-head-ink, #374151);
  font-size: 15px; font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.wr-head__login svg { width: 16px; height: 16px; flex: none; color: var(--wr-violet, #8A63C1); }
.wr-head__login:hover { background: var(--wr-head-hover, rgba(138, 99, 193, .09)); color: var(--wr-violet-dark, #6B47A6); }

/* Le compte (connecté) : une pilule blanche. */
.wr-header .wr-user { background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); }
.wr-header .wr-user__name { font-size: 15px; font-weight: 500; }
.wr-header .wr-user:hover { background: #fff; border-color: #D3BFEF; }

/* Le burger (mobile) : survol blanc. */
.wr-header .wr-burger { color: var(--wr-head-ink); }
.wr-header .wr-burger:hover { background: var(--wr-head-hover); }

/* Langue et pays, tout à droite : du texte, séparé des actions par un filet. */
.wr-ll { margin-left: 2px; padding-left: 12px; }
.wr-ll::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 20px;
  transform: translateY(-50%);
  background: var(--wr-head-rule, #E5E9F0);
}
.wr-ll__btn {
  border: 0;
  background: transparent;
  padding: 7px 8px;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--wr-head-muted, #6B7280);
  box-shadow: none;
}
.wr-ll__btn:hover,
.wr-ll.is-open .wr-ll__btn {
  background: var(--wr-head-hover, rgba(138, 99, 193, .09));
  color: var(--wr-violet-dark, #6B47A6);
  box-shadow: none;
}
.wr-ll__lang { color: var(--wr-head-ink, #374151); font-weight: 700; }
.wr-ll__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }
.wr-ll__btn--devine .wr-ll__lieu { color: inherit; }
.wr-ll__chevron { color: currentColor; opacity: .7; }

@media (max-width: 760px) {
  .wr-head__login { padding: 8px 10px; }
  .wr-ll { padding-left: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LES PLATEFORMES SŒURS DU VISITEUR — DANS LE HEADER, PLUS DANS LA SIDEBAR

   « Espace recruteur » et « Espace Freelance » sont à côté du logo dès
   1361 px (`.wr-head__ext`). En dessous, le header les masque : la sidebar
   (tiroir sur mobile) les reprend, sinon ils seraient introuvables.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1361px) {
  .wr-side__link--etroit { display: none !important; }
}
/* Un filet discret entre le logo et les liens du visiteur : ils sont des
   portes vers d'autres sites, pas la suite du nom. */
.wr-head__ext--visiteur { position: relative; padding-left: 12px; margin-left: 4px; }
.wr-head__ext--visiteur::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 20px;
  transform: translateY(-50%);
  background: var(--wr-head-rule, #E5E9F0);
}

/* ══════════════════════════════════════════════════════════════════════════
   LE PIED DE PAGE — GRILLE ESPACÉE, SIGNATURE, BARRE DU BAS (19/10/2026)

   Trois rangées (voir wr-footer.ejs) :
     1. la grille : des colonnes de liens ÉGALES et bien espacées — plus de
        colonne « marque » 1,8 fois plus large qui tassait les autres ;
     2. la signature : le logo à gauche, l'annonce et les réseaux à droite ;
     3. la barre du bas.

   ⚠️  INTER, COMME LE HEADER, ET AUCUNE TRANSITION.

       Les deux bandes qui encadrent la page parlent la même langue : même
       police, liens plus grands (14,5 px), survol immédiat — couleur et
       soulignement, sans fond qui apparaît en fondu.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-footer {
  font-family: 'Inter', var(--wr-font);
  padding-top: 64px;
}
.wr-footer *,
.wr-footer *::before,
.wr-footer *::after { transition: none !important; }

.wr-footer__grid {
  grid-template-columns: repeat(var(--wr-footer-cols, 3), minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 40px;
  margin-bottom: 52px;
}

.wr-footer__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wr-ink, #1E1B2E);
  margin-bottom: 20px;
}
.wr-footer__title--suite { margin-top: 34px; }

.wr-footer__list { gap: 13px; }

/* Les liens : du texte, sans pastille. Les marges négatives d'avant
   compensaient un padding qui n'existe plus. */
.wr-footer__grid .wr-footer__link {
  display: inline;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 14.5px;
  color: var(--wr-ink-2, #374151);
  line-height: 1.45;
}
.wr-footer__grid .wr-footer__link:hover {
  background: none;
  color: var(--wr-violet-dark, #6B47A6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* La langue courante garde sa pastille violette (wr.css) ; les marges
   négatives réalignent son texte sur celui des autres langues. */
.wr-footer__grid .wr-footer__link.est-actuelle {
  display: inline-block;
  padding: 3px 10px;
  margin: -3px -10px;
  border-radius: 999px;
  background: var(--wr-violet-soft, #F2EDFA);
  color: var(--wr-violet-dark, #6B47A6);
  font-weight: 600;
  text-decoration: none;
}

.wr-footer__apps { margin-top: 0; }

/* ── La signature ─────────────────────────────────────────────────────── */
.wr-footer__signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding: 30px 0 28px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}
.wr-footer__marque { min-width: 0; max-width: 520px; }
.wr-footer__marque .wr-logo-name { font-size: 22px; }
.wr-footer__marque .wr-footer__about {
  margin-top: 10px;
  max-width: 520px;
  font-size: 13.5px;
  line-height: 1.6;
}

.wr-footer__suivre { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* « Publier une annonce » : le même bouton que le CTA du header — violet
   plein, texte blanc. */
.wr-footer .wr-footer__cta {
  margin-top: 0;
  padding: 10px 18px;
  background: var(--wr-violet, #8A63C1);
  border: 1px solid var(--wr-violet, #8A63C1);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  transform: none;
}
.wr-footer .wr-footer__cta:hover { background: var(--wr-violet-dark, #6B47A6); border-color: var(--wr-violet-dark, #6B47A6); color: #fff; transform: none; }

/* Les réseaux : des cercles cernés, comme sur la plupart des grands sites. */
.wr-footer .wr-socials { gap: 10px; flex-wrap: wrap; }
.wr-footer .wr-social {
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid var(--wr-ink-2, #374151);
  color: var(--wr-ink, #1E1B2E);
  transform: none;
}
.wr-footer .wr-social:hover {
  background: var(--wr-violet-soft, #F2EDFA);
  border-color: var(--wr-violet, #8A63C1);
  color: var(--wr-violet-dark, #6B47A6);
  transform: none;
}
.wr-footer .wr-social svg { width: 18px; height: 18px; }

/* ── La barre du bas ──────────────────────────────────────────────────── */
.wr-footer__bottom { font-size: 13px; }
.wr-footer__legal .wr-footer__link { font-size: 13px; color: var(--wr-ink-2, #374151); }
.wr-footer__legal .wr-footer__link:hover { background: none; color: var(--wr-violet-dark, #6B47A6); text-decoration: underline; text-underline-offset: 3px; }

/* ── Tablette et mobile ───────────────────────────────────────────────── */
@media (max-width: 991px) {
  .wr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 540px) {
  .wr-footer { padding-top: 44px; }
  /* Deux colonnes, alignées à gauche : centrées sur une seule, les cinq
     listes faisaient défiler un écran entier de liens. */
  .wr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; gap: 32px 20px; }
  .wr-footer__col, .wr-footer__list { justify-items: start; }
  .wr-footer__col--dernier { grid-column: 1 / -1; }
  /* Les huit langues sur deux colonnes : une seule faisait une liste
     plus haute que tout le reste du pied. */
  .wr-footer__col--dernier .wr-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; justify-self: stretch; }
  .wr-footer__signature { flex-direction: column; align-items: flex-start; text-align: left; }
  .wr-footer__suivre { gap: 16px; }
  .wr-footer .wr-footer__cta { margin: 0; }
  .wr-footer .wr-socials { justify-content: flex-start; }
  .wr-footer__bottom { align-items: flex-start; text-align: left; }
}
/* Le nom du site reste visible dans le pied, même sur téléphone : la règle
   qui le masque sert le header, où la largeur manque (wr.css). */
.wr-footer__marque .wr-logo-name { display: inline; }

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE D'INFORMATION — au-dessus du header (wr-infobar.ejs)

   Violet pastel, UN TON PLUS SOUTENU que le header qu'elle surplombe : sur
   le même violet, les deux bandes se confondraient en une seule. Texte
   centré, lien en gras souligné, croix à droite. Pas collante : elle
   défile avec la page, le header reste en haut. Aucune transition.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-infobar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 56px;
  background: #D6C3F4;
  color: #2E1A55;
  font-family: 'Inter', var(--wr-font);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
.wr-infobar__txt { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; }
.wr-infobar__lien {
  color: #2E1A55;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.wr-infobar__lien:hover { color: #4C2A8C; }
.wr-infobar__x {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #2E1A55;
  cursor: pointer;
}
.wr-infobar__x:hover { background: rgba(255, 255, 255, .5); }
.wr-infobar__x svg { width: 18px; height: 18px; }
.wr-infobar__x:focus-visible { outline: 2px solid #6B47A6; outline-offset: 2px; }

@media (max-width: 760px) {
  .wr-infobar { justify-content: flex-start; text-align: left; padding: 10px 52px 10px 16px; font-size: 14px; }
  .wr-infobar__txt { justify-content: flex-start; }
  .wr-infobar__x { right: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ESPACE CONNECTÉ — UNE SEULE MISE EN PAGE POUR TOUTES LES PAGES

   ⚠️  LE TITRE CHANGEAIT DE PLACE D'UNE PAGE À L'AUTRE.

       Chaque page avait sa propre enveloppe : `.wr-container` (1 200 px
       centrés, 32 px de marge, 24 px au-dessus en style en ligne),
       `--list` (880 px), `.wr-section` (80 px au-dessus), `.wr-cli`
       (1 100 px centrés), `.wr-abo` (1 040 px collés à gauche)… Sur un
       écran large, rail replié, le matching se retrouvait au milieu avec
       350 px de vide de chaque côté, les envois collés à gauche avec
       800 px de vide à droite — et le titre à quatre endroits différents.

   LA RÈGLE, posée par `body.wr-espace` (layouts/main.ejs : /app/… et les
   checklists, hors tunnels) :

     · le titre est en haut à gauche de la colonne, à la marge de la
       coquille — comme sur /app/candidat/envois ;
     · le contenu prend toute la largeur de la colonne ;
     · un élément qui doit rester étroit pour se lire (la carte du
       matching) l'est À L'INTÉRIEUR d'un panneau pleine largeur.

   `!important` sur le remplissage : plusieurs pages le posent en style en
   ligne (`style="padding-top:24px"`), qu'aucune feuille ne bat sans lui.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Les enveloppes : plus de largeur maximale, plus de centrage ── */
body.wr-espace .wr-shell__main > .wr-container,
body.wr-espace .wr-shell__main > .wr-section > .wr-container,
body.wr-espace .wr-shell__main > .wr-section {
  max-width: none;
  margin-inline: 0;
  padding: 0 !important;
}
body.wr-espace .wr-abo,
body.wr-espace .wr-anon,
body.wr-espace .wr-sent-page { max-width: none; }
body.wr-espace .wr-cli,
body.wr-espace .wr-cl { max-width: none; margin: 0; padding-top: 0; }

/* ── Les titres : la même taille, le même départ ──
   Le modèle est `.wr-app-head h1`. Les en-têtes propres à une page
   (matching, tableau de candidatures, base de candidats, CV prêt,
   relances, checklists…) en reprennent la typographie. */
body.wr-espace .wr-shell__main .wr-match-head__title,
body.wr-espace .wr-shell__main .wr-appboard-head__title,
body.wr-espace .wr-shell__main .wr-cvready__title,
body.wr-espace .wr-shell__main .wr-search__title,
body.wr-espace .wr-shell__main .wr-anon__title,
body.wr-espace .wr-shell__main .wr-cli__title,
body.wr-espace .wr-shell__main .wr-cl__title,
body.wr-espace .wr-shell__main .wr-app-title,
body.wr-espace .wr-shell__main .wr-apps-head .wr-title {
  margin-top: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
body.wr-espace .wr-shell__main .wr-apps-head .wr-lede { font-size: 14px; margin-top: 6px; }
@media (max-width: 540px) {
  body.wr-espace .wr-shell__main .wr-match-head__title,
  body.wr-espace .wr-shell__main .wr-appboard-head__title,
  body.wr-espace .wr-shell__main .wr-cvready__title,
  body.wr-espace .wr-shell__main .wr-search__title,
  body.wr-espace .wr-shell__main .wr-anon__title,
  body.wr-espace .wr-shell__main .wr-cli__title,
  body.wr-espace .wr-shell__main .wr-cl__title,
  body.wr-espace .wr-shell__main .wr-app-title,
  body.wr-espace .wr-shell__main .wr-apps-head .wr-title { font-size: 22px; }
}

/* ── Le matching : le panneau sur toute la largeur, la carte au milieu ──
   Une offre étalée sur 1 500 px ne se lit plus : la scène garde une
   largeur de carte, centrée dans le panneau vert. */
body.wr-espace .wr-match[data-match] { margin-bottom: 0; }
body.wr-espace .wr-match[data-match] .wr-match__stage {
  max-width: 860px;
  margin-inline: auto;
}

/* ── Les onglets en bandeau (espace entreprise) : toute la largeur ──
   `width: fit-content` (hérité de `.wr-tabs`) les laissait s'arrêter au
   milieu d'un grand écran ; et sur une colonne étroite (rail ouvert,
   1 440 px), cinq libellés sans retour à la ligne se chevauchaient. Le
   bandeau prend la colonne ; un libellé trop long passe sur deux lignes. */
body.wr-espace .wr-tabs--bar {
  width: 100%;
  grid-auto-columns: minmax(min-content, 1fr);
}
body.wr-espace .wr-tabs--bar .wr-tab { white-space: normal; line-height: 1.25; }
body.wr-espace .wr-tabs--bar .wr-tab svg { flex: none; }

/* Le titre en haut, pas centré sur la hauteur du bouton voisin : sinon
   il descend de quelques pixels par rapport aux autres pages. */
body.wr-espace .wr-shell__main .wr-appboard-head { align-items: flex-start; }

/* ── Les rangées (candidatures reçues, base de candidats) ──
   Les boutons ne rétrécissent pas : sur une colonne étroite, ils
   débordaient sur le rail et recouvraient le métier. Ils passent sous
   l'identité quand la place manque. */
body.wr-espace .wr-shell__main .wr-row { flex-wrap: wrap; }
body.wr-espace .wr-shell__main .wr-row > .wr-row__body { flex: 1 1 220px; }

/* ── Relances : l'en-tête et l'état vide n'avaient AUCUN style ──
   `.wr-apps-head` / `.wr-apps-empty` n'existaient dans aucune feuille : le
   bouton « Retour au tableau » tombait sous le titre et l'état vide
   s'affichait en texte brut, collé à gauche. Même gabarit que les autres
   pages : titre à gauche, bouton à droite ; état vide comme `.wr-empty`. */
body.wr-espace .wr-apps-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px 20px; flex-wrap: wrap; margin-bottom: 24px;
}
body.wr-espace .wr-apps-empty {
  text-align: center; padding: 48px 20px;
  border: 1px solid var(--wr-line); border-radius: var(--wr-r-xl, 18px); background: var(--wr-card, #fff);
}
body.wr-espace .wr-apps-empty__ico {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center;
  background: #ECFDF3; color: #10B981;
}
body.wr-espace .wr-apps-empty h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--wr-ink); }
body.wr-espace .wr-apps-empty p { margin: 0 auto; max-width: 52ch; font-size: 14px; color: var(--wr-muted); }