/* ══════════════════════════════════════════════════════════════════════
   TUNNEL CV — visiteur et connecté
   ══════════════════════════════════════════════════════════════════════
   Le fond est CRÈME (#FDFBF7), pas le fond du site. Ce n'est pas une
   coquetterie : on change de contexte. On n'est plus en train de naviguer,
   on est en train de FAIRE quelque chose. Le décor le dit avant les mots.
   ══════════════════════════════════════════════════════════════════════ */

.wr-tunnel-body {
  margin: 0;
  min-height: 100vh;
  background: #FDFBF7;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--wr-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── L'en-tête ────────────────────────────────────────────────── */

.wr-tun-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #EEE7DA;
}

.wr-tun-head__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1000px;
  margin-inline: auto;
  padding: 14px 24px;
}

.wr-tun-back {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #EEE7DA;
  background: #fff;
  color: var(--wr-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease, transform .18s ease;
}

.wr-tun-back:hover { border-color: var(--wr-violet-2); transform: translateX(-2px); }

.wr-tun-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet-dark);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.wr-tun-step__sep { opacity: .5; }

/* L'autosave, dans le header. Une réassurance qu'on ne voit pas ne rassure
   personne — elle était au fond de la page. */
.wr-tun-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #047857;
  min-height: 16px;
}

.wr-tun-saved::before {
  content: "";
  width: 0;
  transition: width .2s ease;
}

.wr-tun-saved.is-saved::before {
  content: "✓";
  width: auto;
  font-weight: 700;
}

.wr-tun-logo {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wr-ink);
}

.wr-tun-logo span { color: var(--wr-violet); }

.wr-tun-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wr-bg-2);
  border-radius: 100px;
  padding: 4px 13px 4px 4px;
  flex: none;
}

.wr-tun-user__pic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
  color: #6D28D9;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wr-tun-user__pic img { width: 100%; height: 100%; object-fit: cover; }
.wr-tun-user__name { font-size: 12px; font-weight: 600; }

/* ── Le corps ─────────────────────────────────────────────────── */

.wr-tun-main { padding: 32px 24px 72px; }

.wr-tun-wrap { max-width: 760px; margin-inline: auto; }
.wr-tun-wrap--wide { max-width: 860px; }

/* Finalisation : le formulaire à gauche, l'aperçu du CV à droite. */
.wr-tun-wrap--split {
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.wr-tun-panel {
  background: #FDFBF7;
  border-radius: 18px;
}

.wr-tun-h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--wr-ink);
}

/* Le mot accentué : italique ET violet. Jamais souligné. */
.wr-tun-h1 em {
  font-style: italic;
  color: var(--wr-violet-dark);
}

.wr-tun-lede {
  margin: 0 0 28px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--wr-muted);
}

.wr-tun-cap {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted);
  margin-bottom: 12px;
}

.wr-tun-note {
  margin: 8px 0 28px;
  font-size: 12px;
  color: var(--wr-muted-2);
}

.wr-tun-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

.wr-tun-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #6B47A6;
  color: #fff;
  border: 0;
  border-radius: 16px;
  padding: 15px 30px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(107, 71, 166, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}

.wr-tun-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(107, 71, 166, .36);
  color: #fff;
}

.wr-tun-cta--block { width: 100%; }

.wr-tun-cta--ghost {
  background: #fff;
  color: #6B47A6;
  border: 1px solid #E0D6C4;
  box-shadow: none;
}

.wr-tun-cta--ghost:hover { color: #6B47A6; }

.wr-tun-cta[data-busy] { pointer-events: none; opacity: .75; }

/* ── Les modèles ──────────────────────────────────────────────── */

/* ⚠️  LA GRILLE SUIT LE NOMBRE DE MODÈLES, ELLE NE LE DÉCIDE PAS.

   Je l'avais figée à `repeat(3, 1fr)` — d'après la maquette, qui en montrait
   trois. Le contrat de l'API n'en connaît que DEUX : `simple` et `compact`.
   Deux cartes dans une grille à trois colonnes, c'est un trou à droite.

   `auto-fit` s'adapte : deux modèles font deux colonnes, trois en feraient
   trois. Le jour où le pipeline Python en gagne un, il suffira de l'ajouter à
   CV_THEMES — le CSS suivra tout seul.

   `minmax(0, 260px)` plutôt que `1fr` : sans le maximum, deux cartes
   s'étireraient sur toute la largeur, et l'aperçu de 120 px de haut aurait
   l'air d'une bannière. */
.wr-tpl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 260px));
  gap: 14px;
  margin-bottom: 28px;
}

.wr-tpl__item {
  position: relative;
  display: block;
  padding: 12px;
  border: 1.5px solid #EEE7DA;
  background: #fff;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

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

.wr-tpl__item:has(input:checked) {
  border-color: var(--wr-violet);
  background: #F8F4FD;
}

.wr-tpl__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wr-violet);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

.wr-tpl__item:has(input:checked) .wr-tpl__check { display: flex; }

/* L'aperçu, en CSS. Une capture d'écran mentirait dès qu'on toucherait au
   gabarit Python. */
.wr-tpl__prev {
  display: block;
  height: 120px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.wr-tpl__prev span { display: block; border-radius: 3px; background: #EEF1F7; }

/* Une colonne */
.wr-tpl__prev--simple span:nth-child(1) { width: 40%; height: 8px; background: var(--wr-violet); margin-bottom: 6px; }
.wr-tpl__prev--simple span:nth-child(2) { width: 60%; height: 5px; background: #E5E1EC; margin-bottom: 10px; }
.wr-tpl__prev--simple span:nth-child(3) { width: 100%; height: 4px; margin-bottom: 4px; }
.wr-tpl__prev--simple span:nth-child(4) { width: 90%; height: 4px; }

/* Deux colonnes */
.wr-tpl__prev--compact { display: flex; gap: 8px; }
.wr-tpl__prev--compact span:nth-child(1) { width: 34%; height: 100%; background: #F3EFF9; }
.wr-tpl__prev--compact span:nth-child(2) { flex: 1; height: 7px; background: var(--wr-ink); }
.wr-tpl__prev--compact span:nth-child(3),
.wr-tpl__prev--compact span:nth-child(4) { display: none; }

.wr-tpl__name {
  display: block;
  margin: 10px 2px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--wr-ink);
}

/* ── Les couleurs ─────────────────────────────────────────────── */

.wr-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

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

.wr-swatch__dot {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sw);
  transition: box-shadow .18s ease, transform .18s ease;
}

.wr-swatch:hover .wr-swatch__dot { transform: scale(1.08); }

.wr-swatch:has(input:checked) .wr-swatch__dot {
  box-shadow: 0 0 0 3px #FDFBF7, 0 0 0 5px var(--sw);
}

.wr-tun-select { max-width: 420px; margin-bottom: 4px; }

.wr-tun-select select {
  width: 100%;
  padding: 15px 18px;
  border: 1.5px solid #EEE7DA;
  border-radius: 14px;
  background: #fff;
  font: 600 14px 'Montserrat', sans-serif;
  color: var(--wr-ink);
  cursor: pointer;
}

/* ── Les sections du formulaire ───────────────────────────────── */

.wr-sec {
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}

.wr-sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }

/* Le numéro. Dix sections sans repère, on ne sait pas où l'on en est. */
.wr-sec__num {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: #EEE7DA;
  color: var(--wr-muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wr-sec__num.is-req { background: var(--wr-violet); color: #fff; }

.wr-sec__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--wr-ink);
}

.wr-sec__dot { color: var(--wr-violet); }

/* Un bouton d'ajout en pointillés : il dit « il n'y a rien, mais il pourrait
   y avoir quelque chose ». Un bouton plein dirait « clique ici », ce qui n'est
   pas la même invitation. */
.wr-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: #FDFBF7;
  border: 1px dashed #E0D6C4;
  border-radius: 12px;
  color: var(--wr-violet);
  font: 700 13px 'Montserrat', sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.wr-add:hover { border-color: var(--wr-violet-2); background: #FBF8FE; }

/* ── Les tags de compétences ──────────────────────────────────── */

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

.wr-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 100px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  font-size: 12.5px;
  font-weight: 600;
}

.wr-tag-chip button {
  border: 0;
  background: none;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}

.wr-tag-chip button:hover { opacity: 1; }

.wr-tag-add {
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px dashed #E0D6C4;
  background: #FDFBF7;
  color: var(--wr-muted-2);
  font: 500 12.5px 'Montserrat', sans-serif;
  cursor: text;
  min-width: 110px;
  outline: none;
}

.wr-tag-add:focus { border-color: var(--wr-violet-2); color: var(--wr-ink); }

/* ── Finalisation ─────────────────────────────────────────────── */

.wr-tun-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 100px;
  background: #D1FAE5;
  color: #047857;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}

.wr-tun-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 14px;
  margin-bottom: 14px;
}

.wr-tun-row--toggle { cursor: pointer; margin-bottom: 24px; }
.wr-tun-row--toggle input { position: absolute; opacity: 0; pointer-events: none; }

.wr-tun-row__ico {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wr-tun-row__ico--blue { background: #DBEAFE; color: #1E40AF; }
.wr-tun-row__t { font-size: 13.5px; font-weight: 700; color: var(--wr-ink); }
.wr-tun-row__s { font-size: 12px; color: var(--wr-muted); }

.wr-toggle {
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: 100px;
  background: var(--wr-line-2);
  position: relative;
  transition: background .2s ease;
}

.wr-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}

.wr-tun-row--toggle:has(input:checked) .wr-toggle { background: var(--wr-violet); }
.wr-tun-row--toggle:has(input:checked) .wr-toggle::after { transform: translateX(18px); }

.wr-tun-mail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 14px;
  color: var(--wr-muted-2);
}

.wr-tun-mail.is-error { border-color: var(--wr-danger); }

.wr-tun-mail input {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  font: 400 14.5px 'Montserrat', sans-serif;
  color: var(--wr-ink);
}

.wr-tun-trust {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 18px;
}

.wr-tun-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wr-muted);
}

/* ── L'aperçu du CV ───────────────────────────────────────────── */

.wr-cvprev {
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 24px -14px rgba(107, 71, 166, .25);
  position: sticky;
  top: 96px;
}

.wr-cvprev__cap {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted-2);
  margin-bottom: 14px;
}

.wr-cvprev__doc { border: 1px solid #EEE7DA; border-radius: 12px; overflow: hidden; }
.wr-cvprev__top { padding: 16px; }
.wr-cvprev__name { font-size: 16px; font-weight: 800; color: #fff; }
.wr-cvprev__job { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .85); margin-top: 2px; }

.wr-cvprev__body { padding: 14px; }

.wr-cvprev__sec {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 12px 0 5px;
}

.wr-cvprev__sec:first-child { margin-top: 0; }

.wr-cvprev__text {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--wr-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wr-cvprev__tags { display: flex; flex-wrap: wrap; gap: 4px; }

.wr-cvprev__tag {
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 100px;
}

.wr-cvprev__exp { margin-bottom: 6px; }
.wr-cvprev__exp-pos { display: block; font-size: 10.5px; font-weight: 700; color: var(--wr-ink); }
.wr-cvprev__exp-co { display: block; font-size: 9.5px; color: var(--wr-muted); }

.wr-cvprev__empty { margin: 0; font-size: 11px; color: var(--wr-muted-2); text-align: center; padding: 12px 0; }

.wr-cvprev__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wr-muted);
}

.wr-cvprev__meta svg { color: var(--wr-violet); flex: none; }

/* ── Terminé ──────────────────────────────────────────────────── */

.wr-tun-done {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
}

.wr-tun-done__inner { max-width: 520px; text-align: center; position: relative; z-index: 1; }

.wr-tun-done__check {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #D1FAE5;
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 0 0 8px rgba(16, 185, 129, .1);
}

.wr-tun-done__text {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--wr-ink-2);
}

.wr-tun-next {
  background: #fff;
  border: 1px solid #EEE7DA;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: left;
}

.wr-tun-next__cap {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wr-muted-2);
  margin-bottom: 12px;
}

.wr-tun-next__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wr-ink-2);
}

.wr-tun-next__item + .wr-tun-next__item { border-top: 1px solid #F2EFEA; }

.wr-tun-next__item > span {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--wr-violet-soft);
  color: var(--wr-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wr-tun-done__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

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

@media (max-width: 991px) {
  .wr-tun-wrap--split { grid-template-columns: 1fr; }
  .wr-cvprev { position: static; order: -1; }
}

@media (max-width: 640px) {
  .wr-tun-head__inner { padding: 12px 16px; gap: 10px; }
  .wr-tun-logo { display: none; }
  .wr-tun-user__name { display: none; }
  .wr-tun-h1 { font-size: 25px; }
  .wr-tpl { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wr-tpl__prev { height: 76px; padding: 9px; }
  .wr-tpl__name { font-size: 11px; }
  .wr-swatch__dot { width: 38px; height: 38px; }
  .wr-tun-actions .wr-tun-cta { width: 100%; }
  .wr-sec { padding: 18px; }
}


/* ══════════════════════════════════════════════════════════════════════
   LE BOUTON DE SUPPRESSION

   ⚠️  ROUGE, MAIS PAS CRIARD.

   Un bouton rouge plein à côté de chaque ligne, sur un formulaire de dix
   sections, c'est une page qui a l'air en panne. Rouge PÂLE au repos —
   assez pour qu'on ne le confonde avec rien d'autre — rouge plein au
   survol, quand la main est dessus et que l'intention est là.

   ⚠️  BIEN PLACÉ : IL NE BOUGE PAS.

   Sur une ligne simple (une langue, une certification), il s'aligne au
   CENTRE des champs. `align-items: flex-start` le collait en haut, décalé
   d'une dizaine de pixels — on le cherchait à chaque ligne.

   Sur un bloc (une expérience), il est ancré en haut à droite, TOUJOURS au
   même endroit, quelle que soit la hauteur du bloc. Un bouton qui se déplace
   selon le contenu, on ne l'apprend jamais.

   ⚠️  IL NE DÉPLACE RIEN EN APPARAISSANT.

   Pas d'`opacity: 0` révélé au survol : sur mobile, il n'y a pas de survol.
   Un bouton qu'on ne peut pas atteindre au doigt n'existe pas.
   ══════════════════════════════════════════════════════════════════════ */

.wr-repeat {
  display: flex;
  align-items: center;   /* et non flex-start : le bouton s'aligne aux champs */
  gap: 10px;
  margin-bottom: 10px;
}

.wr-repeat--block {
  display: block;
  position: relative;
  padding: 16px 52px 16px 16px;  /* la place du bouton, réservée */
  background: #fff;
  border: 1.5px solid #EEE7DA;
  border-radius: 14px;
  margin-bottom: 12px;
}

.wr-repeat__x {
  width: 34px;
  height: 34px;
  flex: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #FECACA;
  border-radius: 10px;
  background: #FEF2F2;
  color: #EF4444;
  cursor: pointer;

  transition: background .16s ease, color .16s ease,
              border-color .16s ease, transform .12s ease;
}

.wr-repeat__x:hover {
  background: #EF4444;
  border-color: #EF4444;
  color: #fff;
  transform: scale(1.06);
}

.wr-repeat__x:active { transform: scale(.94); }

.wr-repeat__x:focus-visible {
  outline: 2px solid #EF4444;
  outline-offset: 2px;
}

/* Ancré. Il ne suit pas la hauteur du bloc : on sait où le trouver. */
.wr-repeat--block .wr-repeat__x {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* ══════════════════════════════════════════════════════════════════════
   LES CHIPS À COCHER   (type de contrat, mobilité)

   ⚠️  ELLES ÉTAIENT DANS `wr-app.css`. LE TUNNEL NE LE CHARGE PAS.

   Trois cases nues empilées, sans pilule ni espacement — et personne ne
   l'aurait vu avant d'ouvrir la page. Un composant vit là où il est utilisé.

   On coche en cliquant sur LE MOT, pas sur un carré de 13 px. C'est toute la
   raison d'être de la chip : la cible fait la taille de ce qu'on lit.
   ══════════════════════════════════════════════════════════════════════ */

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

.wr-chip-check { cursor: pointer; }

/* La case native disparaît de l'écran, PAS du formulaire ni du parcours
   clavier : `opacity: 0` et non `display: none`. Une chip qu'on ne peut pas
   atteindre au clavier n'est pas une chip, c'est une image. */
.wr-chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wr-chip-check span {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 100px;
  border: 1px solid #EEE7DA;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--wr-ink-2);
  transition: all .18s ease;
}

.wr-chip-check:hover span { border-color: var(--wr-violet-2); }

.wr-chip-check:has(input:checked) span {
  background: var(--wr-violet);
  border-color: var(--wr-violet);
  color: #fff;
  font-weight: 600;
}

/* La coche. Sans elle, une chip violette ressemble à une chip mise en avant,
   pas à une chip CHOISIE — et on ne sait plus ce qu'on a coché. */
.wr-chip-check span::before {
  content: "";
  width: 0;
  height: 11px;
  margin-right: 0;
  background: currentColor;
  clip-path: polygon(14% 44%, 0 65%, 41% 100%, 100% 16%, 84% 0, 39% 66%);
  transition: width .16s ease, margin-right .16s ease;
}

.wr-chip-check:has(input:checked) span::before {
  width: 11px;
  margin-right: 7px;
}

.wr-chip-check:has(input:focus-visible) span {
  outline: 2px solid var(--wr-violet);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   LA SORTIE DE SECOURS

   On enferme quelqu'un dans une page. Il doit pouvoir en partir — même si
   c'est en se déconnectant.

   Discrète, mais LÀ. Un tunnel sans issue, on n'y entre pas deux fois.
   ══════════════════════════════════════════════════════════════════════ */

.wr-tun-escape { margin-top: 28px; text-align: center; }

.wr-tun-escape button {
  border: 0;
  background: none;
  color: var(--wr-muted-2);
  font: 500 13px 'Montserrat', sans-serif;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

.wr-tun-escape button:hover { color: var(--wr-danger); }

/* Le badge « gratuit » du tunnel offre. Vert, pas violet : ce n'est pas une
   étape, c'est une promesse. */
.wr-tun-badge--free { background: #D1FAE5; color: #047857; }


/* ══════════════════════════════════════════════════════════════════════
   LA BARRE COLLANTE

   Sur un formulaire de cinq sections, un bouton en pied de page est un bouton
   qu'on ne trouve pas. Elle sert aux DEUX tunnels — CV et offre — donc elle
   vit dans la feuille qu'ils chargent tous les deux.
   ══════════════════════════════════════════════════════════════════════ */

/* La barre du bas. Collante : sur dix sections, un bouton en pied de page
   est un bouton qu'on ne trouve pas. */
.wr-cv-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(251, 252, 254, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--wr-line);
  border-radius: 14px;
  z-index: 5;
}

.wr-cv-bar__status {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--wr-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   L'ALERTE D'ACCUEIL EN PLEINE LARGEUR (sur les tunnels uniquement)

   Le flash « Complétez votre identité… » est rendu par `partials/wr-flash`,
   enveloppé dans `.wr-container` (max-width centrée). Sur la page bienvenue,
   il ressortait donc plus étroit que la zone de contenu.

   On neutralise la contrainte du conteneur pour le flash des pages tunnel :
   il occupe alors toute la largeur du `<main>`. On ne touche PAS `.wr-container`
   en général — seulement son usage dans `.wr-in-tunnel`, pour ne pas élargir
   les flash de toutes les autres pages du site.
   ══════════════════════════════════════════════════════════════════════ */
.wr-in-tunnel .wr-flash-wrap,
.wr-in-tunnel main > .wr-container {
  max-width: none;
  padding-inline: 0;
}

.wr-in-tunnel .wr-flash {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE FINALE — aperçu iframe du CV + loader (wr-cv-final)
   ══════════════════════════════════════════════════════════════════════ */
.wr-cv-final {
  margin: 24px 0 4px;
  width: 100%;
}
.wr-cv-final__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 20px;
  color: var(--wr-muted, #6B7280);
  font-size: 14px;
  font-weight: 600;
}
.wr-cv-final__spin {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--wr-violet-soft, #EDE6F8);
  border-top-color: var(--wr-violet, #8A63C1);
  animation: wrCvSpin .8s linear infinite;
}
@keyframes wrCvSpin { to { transform: rotate(360deg); } }

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

/* ══════════════════════════════════════════════════════════════════════
   PAGE FINALE CV — en-tête & actions (wr-cvready)
   ══════════════════════════════════════════════════════════════════════ */
.wr-cvready__head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.wr-cvready__check {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  background: #ECFDF5; color: #059669;
  display: grid; place-items: center;
}
.wr-cvready__title { font-size: 22px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0; }
.wr-cvready__sub { font-size: 14px; color: var(--wr-muted, #6B7280); margin: 4px 0 0; }
.wr-cvready__actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   TUNNEL CV — ACCUEIL (choix) + IMPORT PDF + ANALYSE (comme le mobile)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Accueil : les deux cartes de choix ── */
.wr-start-choices { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.wr-start-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px;
  border: 1px solid var(--wr-line, #EEF1F7);
  border-radius: 16px;
  background: #fff;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.wr-start-card:hover { border-color: var(--wr-violet-2, #E4D9F5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,27,46,.07); }
.wr-start-card--primary { border-color: var(--wr-violet, #8A63C1); background: var(--wr-violet-softer, #F6F1FD); }
.wr-start-card__ico {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--wr-violet, #8A63C1); color: #fff;
}
.wr-start-card__ico--ghost { background: var(--wr-violet-softer, #F3EEFB); color: var(--wr-violet, #8A63C1); }
.wr-start-card__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wr-start-card__t { font-size: 16px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-start-card__s { font-size: 13.5px; color: var(--wr-muted, #6B7280); }
.wr-start-card__arrow { color: var(--wr-muted-2, #9CA3AF); flex: none; }

/* ── Zone d'upload ── */
.wr-upload-zone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 36px 20px; margin-top: 6px;
  border: 2px dashed var(--wr-violet-2, #E4D9F5);
  border-radius: 16px; cursor: pointer; text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.wr-upload-zone:hover, .wr-upload-zone.is-drag { background: var(--wr-violet-softer, #F6F1FD); border-color: var(--wr-violet, #8A63C1); }
.wr-upload-zone__ico { color: var(--wr-violet, #8A63C1); }
.wr-upload-zone__t { font-size: 15px; font-weight: 700; color: var(--wr-ink, #1E1B2E); }
.wr-upload-zone__s { font-size: 13px; color: var(--wr-muted, #6B7280); }

.wr-upload-feats { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.wr-upload-feat { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--wr-muted, #4B5563); }
.wr-upload-feat svg { color: var(--wr-violet, #8A63C1); flex: none; }

.wr-tun-skip { display: inline-block; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--wr-violet, #8A63C1); }

/* ── Analyse (progression) ── */
.wr-analyze { text-align: center; padding: 22px 8px 8px; }
.wr-analyze__icon {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wr-violet-softer, #F3EEFB); color: var(--wr-violet, #8A63C1);
  animation: wrPulse 1.6s ease-in-out infinite;
}
@keyframes wrPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .85; } }
.wr-analyze__title { font-size: 19px; font-weight: 800; color: var(--wr-ink, #1E1B2E); margin: 0 0 6px; }
.wr-analyze__hint { font-size: 14px; color: var(--wr-muted, #6B7280); margin: 0 0 22px; }
.wr-analyze__bar { height: 8px; border-radius: 999px; background: var(--wr-violet-soft, #EDE6F8); overflow: hidden; }
.wr-analyze__fill { height: 100%; width: 0; border-radius: 999px; background: var(--wr-violet, #8A63C1); transition: width .4s ease; }
.wr-analyze__pct { font-size: 13px; font-weight: 700; color: var(--wr-violet, #8A63C1); margin-top: 8px; }
.wr-analyze__steps { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: left; max-width: 320px; margin-left: auto; margin-right: auto; }
.wr-analyze__step { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--wr-muted-2, #9CA3AF); transition: color .2s ease; }
.wr-analyze__dot {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #EEF1F7; color: transparent; transition: background .2s ease, color .2s ease;
}
.wr-analyze__step.is-done { color: var(--wr-ink, #1E1B2E); font-weight: 600; }
.wr-analyze__step.is-done .wr-analyze__dot { background: var(--wr-violet, #8A63C1); color: #fff; }

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

/* Questions d'inscription recruteur (onboarding) */
.wr-req { color: var(--wr-danger, #EF4444); }
.wr-qbool { display: flex; gap: 12px; }
.wr-qbool__opt,
.wr-qchoice__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--wr-line, #E5E7EB); cursor: pointer;
  font-size: 14px; transition: border-color .12s ease, background .12s ease;
}
.wr-qbool__opt:hover,
.wr-qchoice__opt:hover { border-color: #D9CEF0; background: var(--wr-violet-softer, #F8F4FD); }
.wr-qchoice { display: flex; flex-wrap: wrap; gap: 10px; }
.wr-qbool__opt input,
.wr-qchoice__opt input { accent-color: var(--wr-violet, #8A63C1); }