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

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

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

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

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

.wr-theme__preview--compact span:nth-child(1) { width: 32%; background: var(--wr-violet-2); }
.wr-theme__preview--compact span:nth-child(2) { flex: 1; }
.wr-theme__preview--compact span:nth-child(3) { display: none; }

.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 n'est plus une action : il ne doit pas ressembler à un
   bouton sur lequel on peut encore cliquer. */
.wr-progress__chip.is-done {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: default;
}

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

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

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

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

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

.wr-side__link--accent {
  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)
   ══════════════════════════════════════════════════════════════════════ */
.wr-reco {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--wr-line, #EEF1F7);
}
.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); }

.wr-reco__list { display: flex; flex-direction: column; gap: 8px; }
.wr-reco__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 12px;
  transition: border-color .12s ease, transform .12s ease;
}
.wr-reco__item:hover { border-color: var(--wr-violet-2, #E4D9F5); transform: translateX(2px); }
.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; }

/* ── 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__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
   ══════════════════════════════════════════════════════════════════════ */
.wr-cboard {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start;
}
/* ══════════════════════════════════════════════════════════════════════════
   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;
  align-items: flex-start;
  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 300px;
}

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

  /* Presque pleine largeur : une colonne à 264 px sur un écran de 380
     laisserait un moignon de la suivante, ni lisible ni cliquable. */
  .wr-cboard > .wr-ccol {
    flex: 0 0 84vw;
  }
}

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

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

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

/* Le cadenas des sections verrouillées reste visible : c'est une
   information, pas une décoration. */
.wr-side.is-collapsed .wr-side__lock {
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 5px;
  right: 6px;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   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;
  padding-top: 6px;
}

.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 {
  min-height: 92px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wr-ink, #1E1B2E);
}

.wr-rte__zone:focus { outline: none; }
.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);
}

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