/* ══════════════════════════════════════════════════════════════════════════
   wr-vitrine.css — L'ACCUEIL ET LA PAGE BUSINESS (refonte 2026-10)

   Deux pages, trois publics : visiteur, candidat connecté, entreprise
   connectée. Le hero et les sections qui lisent des données (candidatures
   reçues, offres pour vous…) sont du code (views/partials/vitrine/). Le
   reste est du HTML rangé en base, produit par `npm run pages:html` et
   retouchable dans l'éditeur.

   ⚠️  TOUT EST PRÉFIXÉ `wv-`.

       Le HTML rangé en base vit des années. Il ne doit dépendre que de
       classes qu'on ne renommera pas au gré d'une autre page : un préfixe
       à lui, et rien d'autre. Les règles `.wr-html p:not([class])` du site
       ne l'atteignent pas — tout y porte une classe.

   ⚠️  UNE SEULE PAGE, TROIS PUBLICS : LE <body> DIT LEQUEL.

       La route pose `wv-aud-visiteur`, `wv-aud-candidat` ou
       `wv-aud-entreprise` sur le <body>. Dans le HTML, un élément propre à
       un public porte `wv-pour-visiteur` (ou `-candidat`, `-entreprise`,
       `-connecte`) : il n'apparaît que pour lui. Un même bloc HTML sert
       ainsi les trois publics, dans les huit langues, sans dupliquer la
       page.

   ⚠️  AUCUNE TRANSITION, COMME LE HEADER.
   ══════════════════════════════════════════════════════════════════════════ */

.wv-vitrine {
  --wv-accent: #8A63C1;
  --wv-violet: #6B47A6;
  --wv-violet-d: #4C2A8C;
  --wv-pastel: #F1EAFC;
  --wv-pastel-2: #F7F2FD;
  --wv-pastel-3: #F5F0FC;
  --wv-deep: #2A1B47;
  --wv-lav: #CDB6F1;
  --wv-lav-2: #D3BFEF;
  --wv-lav-3: #E3D8F4;
  --wv-cream: #FDFBF7;
  --wv-cream-line: #F1ECE2;
  --wv-cream-bd: #EFEAE0;
  --wv-ink: #1E1B2E;
  --wv-text: #3B3355;
  --wv-muted: #5E5675;
  --wv-grey: #6B7280;
  --wv-line: #EAE3F5;
  --wv-line-2: #F2EEF8;
  --wv-soft: #FAF8FD;
  --wv-mag: #C73E9B;
  --wv-mag-d: #952E74;
  --wv-mag-bg: #F9F0F6;
  --wv-sky: #7CC4E8;
  --wv-sky-d: #1F6E92;
  --wv-sky-bg: #EAF6FC;
  --wv-green: #15803D;
  --wv-green-bg: #DCFCE7;
  --wv-title: 'Montserrat', system-ui, sans-serif;
  --wv-ui: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── La coquille : la colonne de gauche est revenue ──────────────────────

   ⚠️  PLUS DE `.wr-shell { padding: 0 }`.

       Les deux pages s'affichaient en pleine largeur, sans la sidebar. Elle
       est revenue (demandé) : la coquille garde ses marges, et les sections
       colorées deviennent des cartes arrondies dans la colonne (voir plus
       bas, « DANS LA COQUILLE »).

   ⚠️  DES REQUÊTES DE CONTENEUR, PAS DE FENÊTRE.

       Avec la sidebar, la colonne fait ~1 030 px sur un écran de 1 440 :
       les points de rupture calculés sur la fenêtre (`@media`) tombaient
       à côté — la mise en page « bureau » serrée dans une colonne étroite.
       Les blocs se règlent donc sur LEUR largeur (`@container`). Les
       conteneurs sont les enveloppes des blocs — jamais `<main>` : un
       conteneur est aussi le bloc de référence des éléments `fixed`
       qu'il contient (messages flash, fenêtres). */
.wv-vitrine .wr-shell__main { min-width: 0; }
.wv-vitrine .wv-page,
.wv-vitrine .wr-html,
.wv-vitrine .wv-hire-sec,
.wv-vitrine .wv-cos-sec { container-type: inline-size; }

/* ── Les trois publics ───────────────────────────────────────────────── */
body:not(.wv-aud-visiteur) .wv-pour-visiteur,
body:not(.wv-aud-candidat) .wv-pour-candidat,
body:not(.wv-aud-entreprise) .wv-pour-entreprise,
body.wv-aud-visiteur .wv-pour-connecte,
body.wv-aud-visiteur .wv-sauf-visiteur,
body.wv-aud-candidat .wv-sauf-candidat,
body.wv-aud-entreprise .wv-sauf-entreprise { display: none !important; }

/* La formule de l'entreprise connectée (grille tarifaire). */
body:not(.wv-formule-gratuit) .wv-si-gratuit,
body:not(.wv-formule-premium) .wv-si-premium { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LES BASES
   ══════════════════════════════════════════════════════════════════════════ */

.wv-page,
.wv-sec,
.wv-hire-sec,
.wv-cos-sec,
.wv-final {
  font-family: var(--wv-ui);
  color: var(--wv-ink);
}

.wv-sec *,
.wv-page *,
.wv-hire-sec *,
.wv-cos-sec *,
.wv-final * { box-sizing: border-box; }

.wv-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.wv-sec { position: relative; padding: 88px 0; }
.wv-sec--tight { padding: 64px 0; }
.wv-sec--top0 { padding-top: 0; }
.wv-sec--bot0 { padding-bottom: 0; }
.wv-sec--cream { background: var(--wv-cream); border-top: 1px solid var(--wv-cream-line); border-bottom: 1px solid var(--wv-cream-line); }
.wv-sec--pastel { background: var(--wv-pastel); }
.wv-sec--soft { background: var(--wv-soft); }
.wv-sec--clip { overflow: hidden; }
.wv-sec--band { padding: 16px 0 72px; }
.wv-sec--bento { padding: 24px 0 88px; }
.wv-sec--trust { padding: 24px 0 0; }
.wv-sec--hn { padding: 88px 0; }

.wv-sec a,
.wv-page a,
.wv-hire-sec a,
.wv-cos-sec a,
.wv-final a { text-decoration: none; }

.wv-link { color: var(--wv-violet); font-weight: 600; }
.wv-link:hover { color: var(--wv-violet-d); text-decoration: underline; text-underline-offset: 3px; }

.wv-deco { position: absolute; pointer-events: none; }

/* ── Titres ─────────────────────────────────────────────────────────── */
.wv-h1,
.wv-h2,
.wv-h3t {
  margin: 0;
  font-family: var(--wv-title);
  font-weight: 700;
  color: var(--wv-ink);
}

.wv-h1 { font-size: clamp(34px, 5cqi, 56px); line-height: 1.04; letter-spacing: -.035em; }
.wv-h1--md { font-size: clamp(30px, 4.4cqi, 50px); line-height: 1.06; }
.wv-h1--biz { font-size: clamp(30px, 4.6cqi, 52px); line-height: 1.08; letter-spacing: -.02em; }
.wv-h2 { font-size: clamp(26px, 3.4cqi, 38px); line-height: 1.15; letter-spacing: -.02em; }
.wv-h2--sm { font-size: clamp(23px, 3cqi, 32px); }
.wv-h2--xs { font-size: clamp(21px, 2.7cqi, 30px); }
.wv-h2--center { text-align: center; margin-left: auto; margin-right: auto; }
.wv-h2--narrow { max-width: 660px; }
.wv-h3t { font-size: 22px; line-height: 1.25; }
.wv-h3t--lg { font-size: 26px; }

.wv-h1 em,
.wv-h2 em,
.wv-h3t em,
.wv-em {
  font-style: italic;
  color: var(--wv-violet);
}

/* Le titre de /business souligne sa seconde phrase d'un trait lavande. */
.wv-h1--biz em {
  font-style: normal;
  color: var(--wv-violet);
  text-decoration: underline;
  text-decoration-color: var(--wv-lav);
  text-decoration-thickness: 8px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.wv-on-dark,
.wv-on-dark .wv-h2,
.wv-on-dark .wv-h3t { color: #fff; }
.wv-on-dark em,
.wv-on-dark .wv-em { color: var(--wv-lav); }

.wv-h3 {
  margin: 0;
  font-family: var(--wv-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--wv-ink);
}

.wv-eyebrow {
  display: block;
  margin: 0 0 16px;
  font-family: var(--wv-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wv-grey);
}
.wv-eyebrow--violet { color: var(--wv-violet); }
.wv-eyebrow--lav { color: var(--wv-lav); }
.wv-eyebrow--mag { color: var(--wv-mag-d); }
.wv-eyebrow--tight { margin-bottom: 8px; }

.wv-lede {
  margin: 20px 0 0;
  max-width: 520px;
  font-family: var(--wv-ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--wv-grey);
}
.wv-lede--dark { color: var(--wv-text); }
.wv-lede--lg { font-size: 18px; }
.wv-lede--center { text-align: center; margin-left: auto; margin-right: auto; }
.wv-lede strong { color: var(--wv-ink); }

.wv-p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--wv-text); max-width: 470px; }
.wv-small { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--wv-muted); }
.wv-note { margin: 16px 0 0; font-size: 13.5px; color: var(--wv-muted); }
.wv-center { text-align: center; }

/* La liste à coches (✓ en violet, texte normal). */
.wv-checks {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wv-ink);
}
.wv-checks > li { position: relative; padding-left: 22px; margin: 0; }
.wv-checks > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--wv-violet);
}
.wv-checks--muted { color: var(--wv-text); font-size: 14.5px; }
.wv-checks--light > li::before { color: var(--wv-lav); }
.wv-checks--mag > li::before { color: var(--wv-mag); }
.wv-checks--sky > li::before { color: var(--wv-sky-d); }

/* Les coches rondes du hero business. */
.wv-bullets {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15.5px;
  color: var(--wv-ink);
}
.wv-bullets > li { display: flex; gap: 10px; align-items: flex-start; margin: 0; line-height: 1.4; }
.wv-bullets__ok {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wv-accent);
  display: grid;
  place-items: center;
}
.wv-bullets__ok svg { width: 11px; height: 11px; }

/* ── Boutons ────────────────────────────────────────────────────────── */
.wv-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wv-btns--lg { gap: 12px; margin-top: 30px; }
.wv-btns--center { justify-content: center; }

.wv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 0;
  border-radius: 12px;
  font-family: var(--wv-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: none;
}
.wv-btn svg { width: 16px; height: 16px; flex: none; }
.wv-btn--lg { padding: 15px 24px; font-size: 16px; }
.wv-btn--sm { padding: 10px 14px; font-size: 13.5px; border-radius: 10px; }
.wv-btn--xs { padding: 8px 12px; font-size: 12.5px; border-radius: 10px; }
.wv-btn--block { display: flex; width: 100%; }

.wv-btn--primary { background: var(--wv-accent); color: #fff; box-shadow: 0 8px 20px rgba(107, 71, 166, .26); }
.wv-btn--primary:hover { background: var(--wv-violet); color: #fff; }
.wv-btn--ghost { background: #fff; color: var(--wv-violet-d); border: 1.5px solid var(--wv-lav-2); font-weight: 600; }
.wv-btn--ghost:hover { background: var(--wv-pastel-2); color: var(--wv-violet-d); }
.wv-btn--cream { background: #fff; color: var(--wv-violet-d); border: 1px solid var(--wv-cream-bd); font-weight: 600; }
.wv-btn--cream:hover { background: var(--wv-pastel-2); color: var(--wv-violet-d); }
.wv-btn--deep { background: var(--wv-deep); color: #fff; }
.wv-btn--deep:hover { background: #3A2862; color: #fff; }
.wv-btn--soft { background: var(--wv-pastel); color: var(--wv-violet-d); }
.wv-btn--soft:hover { background: #E6DAF8; color: var(--wv-violet-d); }
.wv-btn--line { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); font-weight: 600; }
.wv-btn--line:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.wv-btn--mag { background: var(--wv-mag); color: #fff; }
.wv-btn--mag:hover { background: var(--wv-mag-d); color: #fff; }
.wv-btn--mag-ghost { background: #fff; color: var(--wv-mag-d); border: 1.5px solid #E7B9D7; font-weight: 600; }
.wv-btn--mag-ghost:hover { background: var(--wv-mag-bg); color: var(--wv-mag-d); }
.wv-btn--grey { background: var(--wv-line-2); color: var(--wv-muted); cursor: default; }
.wv-btn--done { background: #22A35A; color: #fff; cursor: default; }
.wv-btn--outline { background: #fff; color: var(--wv-violet); border: 1.5px solid var(--wv-lav); }
.wv-btn--outline:hover { background: var(--wv-pastel-2); color: var(--wv-violet); }

/* Un formulaire qui n'est qu'un bouton (déconnexion → inscription). */
.wv-form-btn { display: inline-flex; margin: 0; }

/* ── Pastilles et étiquettes ───────────────────────────────────────── */
.wv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--wv-pastel);
  color: var(--wv-violet);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.wv-pill--accent { background: var(--wv-accent); color: #fff; }
.wv-pill--grey { background: var(--wv-line-2); color: var(--wv-muted); }
.wv-pill--green { background: var(--wv-green-bg); color: var(--wv-green); }
.wv-pill--mag { background: var(--wv-mag-bg); color: var(--wv-mag-d); }
.wv-pill--sky { background: var(--wv-sky-bg); color: var(--wv-sky-d); }
.wv-pill--lav { background: var(--wv-lav); color: #2E1A55; }

.wv-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 100px;
  background: #F2EDFA;
  color: var(--wv-violet);
  font-size: 11px;
  line-height: 1.4;
}
.wv-tag--grey { background: #F2EEF8; color: var(--wv-ink); font-size: 11.5px; padding: 4px 9px; }
.wv-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* Le statut « visible » du candidat. */
.wv-visi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--wv-green-bg);
  color: var(--wv-green);
  font-family: var(--wv-ui);
  font-size: 14px;
  font-weight: 700;
}
.wv-visi::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #16A34A; }
.wv-visi--off { background: var(--wv-line-2); color: var(--wv-muted); }
.wv-visi--off::before { background: #A8A1B8; }

/* Les avatars à initiales, en quatre teintes. */
.wv-ava {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E6DAF8;
  color: var(--wv-violet);
  display: grid;
  place-items: center;
  font-family: var(--wv-ui);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.wv-ava img { width: 100%; height: 100%; object-fit: cover; }
.wv-ava--sq { border-radius: 10px; }
.wv-ava--sm { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.wv-ava--lg { width: 44px; height: 44px; font-size: 14px; }
.wv-ava--ink { background: var(--wv-ink); color: #fff; }
.wv-ava--b { background: #E0F2FE; color: #0369A1; }
.wv-ava--a { background: #FEF3C7; color: #B45309; }
.wv-ava--p { background: #FCE7F3; color: #BE185D; }
.wv-ava--v { background: #F1EAFB; color: var(--wv-violet); }

/* ── Grilles ───────────────────────────────────────────────────────── */
.wv-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wv-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wv-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Les quatre chiffres du hero entreprise : deux par ligne dans la colonne
   de texte (~450 px avec la sidebar), quatre quand le bloc est large. */
.wv-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 1300px) {
  .wv-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wv-split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.wv-split--top { align-items: flex-start; }
.wv-split > .wv-col { flex: 1 1 440px; min-width: 0; }
.wv-split > .wv-col--sm { flex: 1 1 340px; min-width: 0; }
.wv-split > .wv-col--lg { flex: 1 1 520px; min-width: 0; }
.wv-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wv-head-row__sub { margin: 6px 0 0; font-size: 14.5px; color: var(--wv-muted); }
.wv-mt { margin-top: 24px; }
.wv-mt-lg { margin-top: 36px; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO DE L'ACCUEIL — VISITEUR (le style de la page « Créer mon CV »)
   ══════════════════════════════════════════════════════════════════════════ */

.wv-hero {
  position: relative;
  overflow: hidden;
  background: var(--wv-cream);
  padding: 76px 0 72px;
  border-bottom: 1px solid var(--wv-cream-line);
  font-family: var(--wv-title);
}
.wv-hero--me { padding: 64px 0; }
.wv-hero__deco { right: -60px; top: -40px; }
.wv-hero__grid { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.wv-hero__grid--top { align-items: flex-start; gap: 48px; }
.wv-hero__txt { flex: 1 1 400px; min-width: 0; }
.wv-hero__vis { flex: 1 1 480px; min-width: 0; position: relative; min-height: 560px; font-family: var(--wv-ui); }
.wv-hero__side { flex: 1 1 440px; min-width: 0; font-family: var(--wv-ui); }

/* Les deux portes de la page CV. */
.wv-doors { margin-top: 30px; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.wv-door {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--wv-cream-bd);
  color: var(--wv-ink);
  font-family: var(--wv-title);
}
.wv-door:hover { border-color: var(--wv-lav); color: var(--wv-ink); }
.wv-door--main { background: var(--wv-pastel-2); border-color: var(--wv-accent); }
.wv-door__ico {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--wv-pastel-3);
  color: var(--wv-accent);
  display: grid;
  place-items: center;
}
.wv-door--main .wv-door__ico { background: var(--wv-accent); color: #fff; }
.wv-door__ico svg { width: 24px; height: 24px; }
.wv-door__body { flex: 1; min-width: 0; }
.wv-door__t { display: block; font-size: 16px; font-weight: 700; }
.wv-door__s { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--wv-grey); }
.wv-door__go { flex: none; width: 18px; height: 18px; color: #9A93AE; }

.wv-perks { margin: 18px 0 0; font-family: var(--wv-ui); font-size: 13.5px; color: var(--wv-grey); }
.wv-perks span + span::before { content: ' · '; }

/* La fenêtre « Choisissez le style de votre CV ». */
.wv-win {
  position: absolute;
  left: 80px;
  top: 0;
  right: 0;
  border-radius: 18px;
  background: var(--wv-cream);
  border: 1px solid var(--wv-cream-bd);
  box-shadow: 0 26px 60px rgba(46, 26, 85, .13);
  overflow: hidden;
  font-family: var(--wv-title);
}
.wv-win__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--wv-cream-line); }
.wv-win__dot { width: 9px; height: 9px; border-radius: 50%; background: #E8E1D4; }
.wv-win__step { margin-left: auto; font-family: var(--wv-ui); font-size: 11px; font-weight: 700; color: #9A93AE; letter-spacing: .06em; text-transform: uppercase; }
.wv-win__body { padding: 22px 24px 24px; }
.wv-win__h { margin: 0; font-weight: 700; font-size: 22px; letter-spacing: -.03em; line-height: 1.15; color: var(--wv-ink); }
.wv-win__h em { font-style: italic; color: var(--wv-violet); }
.wv-win__p { margin: 6px 0 0; font-size: 12px; color: var(--wv-grey); }
.wv-win__lbl { margin: 16px 0 8px; font-family: var(--wv-ui); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wv-grey); }
.wv-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wv-layout { position: relative; border: 1px solid var(--wv-cream-bd); border-radius: 12px; background: #fff; padding: 8px; }
.wv-layout.is-on { border: 1.5px solid var(--wv-accent); background: var(--wv-pastel-3); }
.wv-layout__ok { position: absolute; right: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--wv-accent); display: grid; place-items: center; }
.wv-layout__ok svg { width: 9px; height: 9px; }
.wv-layout__thumb { height: 58px; border-radius: 7px; background: #fff; border: 1px solid #F3EFE8; padding: 7px; display: flex; flex-direction: column; gap: 4px; }
.wv-layout__thumb--compact { flex-direction: row; gap: 6px; border: 0; }
.wv-layout__thumb--europass { border-top: 3px solid #0F3E91; padding-top: 6px; }
.wv-layout__name { margin: 6px 0 0; font-size: 11px; font-weight: 700; color: var(--wv-ink); }
.wv-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-sw { width: 24px; height: 24px; border-radius: 50%; }
.wv-sw.is-on { box-shadow: 0 0 0 2px var(--wv-cream), 0 0 0 4px currentColor; }
.wv-win__foot { margin-top: 18px; display: flex; justify-content: flex-end; }
.wv-win__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: var(--wv-violet); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(107, 71, 166, .3); }
.wv-win__cta svg { width: 14px; height: 14px; }

/* Les petites barres grises qui figurent du texte. */
.wv-bar { display: block; height: 3px; border-radius: 2px; background: #ECEEF3; }
.wv-bar--4 { height: 4px; }
.wv-bar--ink { background: var(--wv-ink); }
.wv-bar--blue { background: #2563EB; }
.wv-bar--accent { background: var(--wv-accent); }
.wv-bar--pale { background: #F1F0F5; }
.wv-bar--euro { background: #0F3E91; }
.wv-bar--sky { background: #D5E0F6; }

/* Le CV obtenu : Compact, bleu. */
.wv-cv {
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 210px;
  height: 290px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(46, 26, 85, .2);
  display: flex;
  overflow: hidden;
  font-family: var(--wv-title);
}
.wv-cv__side { flex: 0 0 66px; background: #EEF3FD; padding: 12px 8px; display: flex; flex-direction: column; gap: 5px; }
.wv-cv__photo { width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%; background: #C7D7F7; }
.wv-cv__main { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wv-cv__name { font-weight: 800; font-size: 12px; letter-spacing: -.02em; color: var(--wv-ink); }
.wv-cv__role { font-size: 8.5px; font-weight: 600; color: #2563EB; }
.wv-cv__sec { margin-top: 8px; padding-bottom: 3px; border-bottom: 1px solid #2563EB; font-size: 6.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2563EB; }
.wv-cv__chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.wv-cv__chip { padding: 2px 5px; border-radius: 4px; background: #E3EBFB; font-size: 6px; color: var(--wv-ink); }

/* Le téléphone : le tableau de bord de l'application. */
.wv-phone {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 200px;
  height: 400px;
  border-radius: 32px;
  background: var(--wv-ink);
  padding: 8px;
  box-shadow: 0 26px 54px rgba(46, 26, 85, .28);
  font-family: system-ui, -apple-system, sans-serif;
}
.wv-phone__screen { height: 100%; border-radius: 25px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.wv-phone__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 6px; }
.wv-phone__top img { height: 15px; width: auto; }
.wv-phone__ini { width: 22px; height: 22px; border-radius: 50%; background: #8A63C0; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.wv-phone__tabs { display: flex; gap: 12px; padding: 0 10px; font-size: 8.5px; border-bottom: 1px solid #F0EDF5; color: #999; }
.wv-phone__tabs span { padding: 5px 0; }
.wv-phone__tabs .is-on { font-weight: 700; color: #000; border-bottom: 2px solid #000; }
.wv-phone__body { flex: 1; background: #F7F5FB; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.wv-phone__hello { border-radius: 13px; background: #fff; padding: 10px; box-shadow: 0 2px 6px rgba(46, 26, 71, .05); }
.wv-phone__hello strong { display: block; font-size: 12.5px; font-weight: 800; color: #1A1A1A; }
.wv-phone__hello small { display: block; margin-top: 2px; font-size: 8px; color: #6B6B7B; }
.wv-phone__vis { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 4px 8px; border-radius: 999px; background: var(--wv-green-bg); color: var(--wv-green); font-size: 8px; font-weight: 700; }
.wv-phone__vis::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #16A34A; }
.wv-phone__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wv-phone__tile { border-radius: 11px; background: #fff; padding: 8px; min-height: 62px; font-size: 8.5px; font-weight: 800; color: #1A1A1A; display: flex; flex-direction: column; gap: 5px; }
.wv-phone__tile--on { background: #8A63C0; color: #fff; }
.wv-phone__tico { width: 20px; height: 20px; border-radius: 6px; background: #F1EAFB; display: grid; place-items: center; color: #8A63C0; }
.wv-phone__tile--on .wv-phone__tico { background: transparent; color: #fff; }
.wv-phone__tico svg { width: 11px; height: 11px; }
.wv-phone__nav { display: flex; justify-content: space-around; align-items: center; padding: 9px 6px 12px; border-top: 1px solid #F0F0F0; background: #fff; color: #999; }
.wv-phone__nav svg { width: 15px; height: 15px; }
.wv-phone__nav .is-on { color: #000; }
.wv-phone__me { width: 15px; height: 15px; border-radius: 50%; background: #E8E8E8; }

/* ── La rangée de preuve : les entreprises du site ───────────────────── */
.wv-proof { padding: 32px 0 40px; }
.wv-proof__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.wv-proof__cos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.wv-proof__co { display: inline-flex; align-items: center; gap: 9px; color: #8E879F; font-family: var(--wv-title); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.wv-proof__co:hover { color: var(--wv-violet); }
.wv-proof__co img { height: 28px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .75; }
.wv-proof__ini { width: 28px; height: 28px; border-radius: 8px; background: #F1EDF8; color: #8E879F; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.wv-proof__txt { margin: 0; max-width: 380px; font-size: 14.5px; line-height: 1.5; color: var(--wv-text); }
.wv-proof__txt strong { color: var(--wv-violet); }
/* Sans logo : le nombre d'offres seul, centré. */
.wv-proof--seul .wv-proof__row { justify-content: center; text-align: center; }
.wv-proof--seul .wv-proof__txt { max-width: 560px; }

/* ── Les logos choisis au backoffice (Apparence › Logos) ─────────────────
   Leurs couleurs d'origine, 30 px de haut : un logo horizontal y est
   lisible, un carré reste discret. */
.wv-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.wv-logos__item { margin: 0; padding: 0; display: flex; align-items: center; }
.wv-logos img { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.wv-logos__lien { display: block; }
.wv-logos__lien:hover { opacity: .72; }
.wv-strip .wv-logos { margin-left: auto; }

/* ── Les dernières fiches de l'annuaire, centrées (bloc dynamique) ──────
   Juste sous le bandeau « Créez votre CV » : le bandeau rend une partie
   de son espace du bas quand il est le dernier élément de son bloc. */
.wv-cos-sec { padding: 8px 0 64px; }
.wv-cos-sec__titre { margin: 0 0 18px; text-align: center; font-family: var(--wv-ui); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wv-grey); }
.wv-proof__cos--centre { justify-content: center; }
.wr-html > .wv-sec--band:last-child { padding-bottom: 36px; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS DE L'ACCUEIL
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le bandeau sombre « Créez votre CV » ─────────────────────────────── */
.wv-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--wv-deep);
  padding: 56px 32px;
  text-align: center;
  color: #fff;
}
.wv-band > *:not(.wv-deco) { position: relative; }
.wv-band__d1 { left: -60px; top: -40px; }
.wv-band__d2 { right: -70px; bottom: -60px; }
.wv-band .wv-h2 { color: #fff; font-size: clamp(26px, 3.4cqi, 36px); }
.wv-chips { margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wv-chip-dark { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #fff; }
.wv-chip-dark svg { width: 16px; height: 16px; color: var(--wv-lav); }
.wv-band .wv-btn { margin-top: 30px; }

/* ── Le bento des outils ───────────────────────────────────────────── */
.wv-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.wv-s2 { grid-column: span 2; }
.wv-s3 { grid-column: span 3; }
.wv-s4 { grid-column: span 4; }
.wv-tile {
  border: 1px solid var(--wv-line);
  border-radius: 18px;
  background: #fff;
  padding: 24px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.wv-tile--tall { min-height: 320px; }
.wv-tile--short { min-height: 230px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
.wv-tile--pastel { background: var(--wv-pastel); }
.wv-tile__p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--wv-text); }
.wv-tile__fig { flex: 1; display: grid; place-items: center; padding: 4px 0; }
.wv-tile__fig svg { max-width: 100%; height: auto; }

.wv-gen { flex: 1; border-radius: 14px; background: var(--wv-cream); border: 1px solid var(--wv-cream-line); padding: 18px; display: flex; gap: 14px; align-items: flex-end; }
.wv-gen__cv { flex: 1; align-self: stretch; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(46, 26, 85, .08); display: flex; overflow: hidden; min-height: 150px; }
.wv-gen__side { flex: 0 0 30%; background: #EEF3FD; }
.wv-gen__main { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.wv-gen__name { font-family: var(--wv-title); font-weight: 800; font-size: 12px; }
.wv-gen__role { font-size: 9px; color: #2563EB; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid #2563EB; margin-bottom: 2px; }
/* Un bouton DESSINÉ, pas un bouton : en violet pastel, sans ombre ni
   curseur, pour qu'on ne le prenne pas pour un lien. */
.wv-gen__btn { padding: 9px 13px; border-radius: 12px; background: var(--wv-pastel); border: 1px solid #E3D5F7; color: var(--wv-violet); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: default; user-select: none; }

.wv-match { flex: 1; border-radius: 14px; background: #F4F0FA; padding: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; font-family: system-ui, -apple-system, sans-serif; }
.wv-mcard { width: 230px; max-width: 100%; border-radius: 22px; background: #fff; padding: 16px; box-shadow: 0 8px 18px rgba(46, 26, 71, .12); }
.wv-mcard__co { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; color: #8A63C0; letter-spacing: .04em; text-transform: uppercase; }
.wv-mcard__logo { width: 40px; height: 40px; border-radius: 12px; background: #F4F0FA; display: grid; place-items: center; color: #B9A8DA; }
.wv-mcard__logo svg { width: 18px; height: 18px; }
.wv-mcard__t { margin-top: 10px; font-size: 16px; font-weight: 800; color: #1A1A1A; line-height: 1.2; }
.wv-mcard__tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.wv-mcard__tags span { padding: 4px 8px; border-radius: 999px; background: #F5F4F8; font-size: 10px; font-weight: 600; color: #4A4658; }
.wv-mcard__why { margin-top: 10px; border-radius: 12px; background: #F0FDF4; padding: 8px 10px; }
.wv-mcard__why b { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; color: #166534; text-transform: uppercase; }
.wv-mcard__why span { display: inline-block; margin: 5px 4px 0 0; padding: 3px 7px; border-radius: 999px; background: #fff; font-size: 9.5px; color: #166534; }
.wv-mbtns { display: flex; align-items: center; gap: 14px; }
.wv-mbtn { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.wv-mbtn svg { width: 20px; height: 20px; }
.wv-mbtn--no { border: 1.5px solid #FBD5D6; color: #E5484D; }
.wv-mbtn--cv { width: 38px; height: 38px; color: #6B46A8; }
.wv-mbtn--cv svg { width: 16px; height: 16px; }
.wv-mbtn--yes { background: #8A63C0; color: #fff; }

.wv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.wv-list__item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--wv-line-2); margin: 0; }
.wv-list__item:last-child { border-bottom: 0; }
.wv-list__t { display: block; font-size: 13.5px; font-weight: 700; color: var(--wv-ink); }
.wv-list__m { font-size: 12px; color: var(--wv-muted); }

.wv-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.wv-bubble { max-width: 85%; padding: 10px 13px; font-size: 13px; line-height: 1.45; }
.wv-bubble--in { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: var(--wv-line-2); color: var(--wv-ink); }
.wv-bubble--out { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--wv-accent); color: #fff; }

.wv-ai__txt { flex: 1 1 260px; }
.wv-ai__txt .wv-tile__p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
.wv-ai__rows { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.wv-ai__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--wv-pastel); font-size: 13px; color: var(--wv-ink); }
.wv-ai__row b { color: var(--wv-violet); }

.wv-stores { display: flex; flex-wrap: wrap; gap: 8px; }
/* Les boutons des stores : le logo du système, puis deux lignes — le
   système en petit, le nom du store en gras. Ils mènent à
   /application/ios|android, qui renvoie à l'adresse du backoffice. */
.wv-store { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 11px; background: var(--wv-ink); color: #fff; font-family: var(--wv-ui); line-height: 1.1; }
.wv-store:hover { background: #000; color: #fff; }
.wv-store svg { flex: none; width: 18px; height: 18px; }
.wv-store__txt { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.wv-store__os { font-size: 9.5px; font-weight: 500; letter-spacing: .02em; opacity: .78; }
.wv-store__name { font-size: 13px; font-weight: 700; }

/* ── Panneaux colorés (Freelance, Hiring Notes…) ───────────────────── */
.wv-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  border-radius: 24px;
  background: var(--wv-pastel);
  padding: 44px;
}
.wv-panel--rev { flex-wrap: wrap-reverse; }
.wv-panel--mag { background: var(--wv-mag-bg); border: 1px solid #F1DCEA; }
.wv-panel--plain { background: transparent; padding: 0; border-radius: 0; }
.wv-panel > .wv-col { flex: 1 1 380px; min-width: 0; }
.wv-panel > .wv-col--lg { flex: 1 1 460px; min-width: 0; }
.wv-panel > .wv-col--xl { flex: 1 1 500px; min-width: 0; }
.wv-brand { display: block; height: 30px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.wv-brand + .wv-eyebrow { margin-top: 18px; margin-bottom: 8px; }

.wv-missions { display: flex; flex-direction: column; gap: 10px; font-family: var(--wv-title); }
.wv-missions__foot { align-self: flex-end; }
.wv-mission { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid #EEF1F7; }
.wv-mission__ico { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: #FEF3C7; color: #B45309; }
.wv-mission__ico--b { background: #E0F2FE; color: #0369A1; }
.wv-mission__ico--p { background: #FCE7F3; color: #BE185D; }
.wv-mission__body { flex: 1; min-width: 0; }
.wv-mission__t { font-size: 14.5px; font-weight: 700; color: var(--wv-ink); }
.wv-mission__m { margin-top: 3px; font-family: var(--wv-ui); font-size: 11.5px; color: var(--wv-grey); }
.wv-mission .wv-tags { margin-top: 8px; font-family: var(--wv-ui); }
.wv-mission__price { flex: none; padding: 5px 10px; border-radius: 100px; background: #F2EDFA; color: var(--wv-violet); font-family: var(--wv-ui); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   « ELLES RECRUTENT SUR WHILERESUME » — le bloc `vitrine-entreprises`
   ══════════════════════════════════════════════════════════════════════════ */

.wv-hire-sec { padding: 0 0 88px; }
.wv-hire-sec .wv-h2 { margin-bottom: 28px; }
.wv-hire { border-radius: 22px; overflow: hidden; background: var(--wv-deep); }
.wv-hire__tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.wv-hire__tab {
  flex: 1 1 160px;
  min-width: 0;
  padding: 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  font: 600 15px var(--wv-ui);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wv-hire__tab:hover { color: #fff; }
.wv-hire__tab.is-active,
.wv-hire__tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--wv-lav); }
.wv-hire__post {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px;
  background: var(--wv-accent);
  color: #fff;
  font: 700 15.5px var(--wv-ui);
  box-shadow: inset 0 -3px 0 var(--wv-lav);
  text-align: center;
}
.wv-hire__post:hover { background: var(--wv-violet); color: #fff; }
.wv-hire__plus { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; flex: none; }
.wv-hire__plus svg { width: 13px; height: 13px; }
.wv-hire__post > svg { width: 15px; height: 15px; flex: none; }
.wv-hire__panel { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; padding: 40px; }
.wv-hire__panel[hidden] { display: none; }

.wv-fiche { flex: 1 1 380px; min-width: 0; border-radius: 16px; background: #fff; overflow: hidden; color: var(--wv-ink); }
.wv-fiche__cover { height: 96px; background: linear-gradient(120deg, #CDB6F1, #F3D8EC); }
.wv-fiche__body { padding: 0 22px 22px; }
.wv-fiche__logo { margin-top: -30px; width: 60px; height: 60px; border-radius: 16px; background: var(--wv-ink); color: #fff; border: 3px solid #fff; display: grid; place-items: center; font-family: var(--wv-title); font-weight: 800; font-size: 18px; overflow: hidden; }
.wv-fiche__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.wv-fiche__name { margin-top: 10px; font-family: var(--wv-title); font-weight: 700; font-size: 19px; color: var(--wv-ink); }
.wv-fiche__meta { margin-top: 2px; font-size: 13px; color: var(--wv-muted); }
.wv-fiche__jobs { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.wv-fiche__job { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--wv-soft); font-size: 13px; color: var(--wv-ink); }
.wv-fiche__job:hover { background: var(--wv-pastel); color: var(--wv-ink); }
.wv-fiche__job strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-fiche__job span { flex: none; color: var(--wv-muted); }
.wv-fiche__none { padding: 12px; border-radius: 10px; background: var(--wv-soft); font-size: 13px; color: var(--wv-muted); }
.wv-hire__txt { flex: 1 1 340px; min-width: 0; color: #fff; }
.wv-hire__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--wv-lav); text-transform: uppercase; }
.wv-hire__lead { margin: 12px 0 0; font-family: var(--wv-title); font-weight: 600; font-size: 26px; line-height: 1.3; color: #fff; }
.wv-hire__p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

/* ══════════════════════════════════════════════════════════════════════════
   « UN SEUL COMPTE, TROIS ESPACES »
   ══════════════════════════════════════════════════════════════════════════ */

.wv-acc__key {
  margin: 36px auto 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--wv-cream-bd);
  box-shadow: 0 12px 30px rgba(46, 26, 85, .08);
}
.wv-acc__keyico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--wv-pastel-3); color: var(--wv-violet); display: grid; place-items: center; }
.wv-acc__keyico svg { width: 20px; height: 20px; }
.wv-acc__keytxt { font-size: 14px; line-height: 1.4; }
.wv-acc__keytxt strong { display: block; color: var(--wv-ink); }
.wv-acc__keytxt span { color: var(--wv-grey); }
.wv-acc__lines { position: relative; height: 56px; max-width: 1152px; margin: 0 auto; }
.wv-acc__lines i { position: absolute; background: var(--wv-lav-2); }
.wv-acc__lines .l0 { left: 50%; top: 0; width: 2px; height: 28px; margin-left: -1px; }
.wv-acc__lines .lh { left: 16.66%; right: 16.66%; top: 27px; height: 2px; }
.wv-acc__lines .l1 { left: 16.66%; top: 27px; width: 2px; height: 29px; margin-left: -1px; }
.wv-acc__lines .l2 { left: 50%; top: 27px; width: 2px; height: 29px; margin-left: -1px; }
.wv-acc__lines .l3 { left: 83.33%; top: 27px; width: 2px; height: 29px; margin-left: -1px; }
.wv-acc__card {
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--wv-cream-bd);
  border-top: 4px solid var(--wv-accent);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wv-acc__card--hn { border-top-color: var(--wv-mag); }
.wv-acc__card--wp { border-top-color: var(--wv-sky); }
.wv-acc__card .wv-pill { align-self: flex-start; }
.wv-acc__card .wv-checks { margin: 0; }
.wv-acc__go { margin-top: auto; font-weight: 700; font-size: 14.5px; color: var(--wv-violet); }
.wv-acc__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.wv-acc__card--hn .wv-acc__go { color: var(--wv-mag-d); }
.wv-acc__card--wp .wv-acc__go { color: var(--wv-sky-d); }

/* ── Confiance ─────────────────────────────────────────────────────── */
.wv-trust__tile { border-radius: 16px; background: var(--wv-deep); color: #fff; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.wv-trust__tile svg { width: 72px; height: 72px; color: var(--wv-lav); }
.wv-trust__tile strong { font-size: 16px; }
.wv-trust__tile span { font-size: 14px; color: rgba(255, 255, 255, .75); }

/* ══════════════════════════════════════════════════════════════════════════
   LE CTA FINAL DE L'ACCUEIL — LES TROIS APPAREILS
   ══════════════════════════════════════════════════════════════════════════ */

.wv-final { padding: 88px 0 72px; text-align: center; background: linear-gradient(#fff 0%, #fff 52%, var(--wv-pastel) 52%); }
.wv-devices { position: relative; margin: 60px auto 0; max-width: 1040px; height: 470px; text-align: left; }
.wv-laptop { position: absolute; left: 15%; right: 15%; top: 0; height: 392px; border-radius: 18px 18px 0 0; background: var(--wv-ink); padding: 12px 12px 0; }
.wv-laptop__screen { height: 100%; border-radius: 8px 8px 0 0; background: #fff; overflow: hidden; }
.wv-laptop__base { position: absolute; left: 10%; right: 10%; top: 392px; height: 18px; border-radius: 0 0 14px 14px; background: #CFC8DD; }
.wv-laptop__bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #ECE3FA; }
.wv-laptop__bar img { height: 15px; width: auto; }
.wv-laptop__space { padding: 3px 9px; border-radius: 100px; background: #E4D7F7; color: var(--wv-violet); font-size: 9.5px; font-weight: 700; }
.wv-laptop__me { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--wv-accent); color: #fff; display: grid; place-items: center; font-size: 8px; font-weight: 700; }
.wv-laptop__body { display: flex; gap: 14px; padding: 16px; }
.wv-laptop__hero { flex: 1.15; min-width: 0; border-radius: 12px; background: var(--wv-cream); padding: 14px; }
.wv-laptop__h { font-family: var(--wv-title); font-weight: 700; font-size: 16px; letter-spacing: -.03em; line-height: 1.15; color: var(--wv-ink); }
.wv-laptop__h em { font-style: italic; color: var(--wv-violet); }
.wv-laptop__vis { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 4px 9px; border-radius: 999px; background: var(--wv-green-bg); color: var(--wv-green); font-size: 9px; font-weight: 700; }
.wv-laptop__vis::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.wv-laptop__kpis { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wv-laptop__kpi { border-radius: 9px; background: #fff; border: 1px solid var(--wv-cream-bd); padding: 8px; font-size: 8.5px; color: var(--wv-muted); }
.wv-laptop__kpi strong { display: block; font-size: 15px; color: var(--wv-ink); }
.wv-laptop__prog { margin-top: 10px; height: 6px; border-radius: 4px; background: #F1F0F5; overflow: hidden; }
.wv-laptop__prog i { display: block; height: 100%; width: 85%; border-radius: 4px; background: var(--wv-accent); }
.wv-laptop__pc { margin-top: 4px; font-size: 8.5px; color: var(--wv-grey); }
.wv-laptop__jobs { flex: 1; min-width: 0; }
.wv-laptop__jt { font-size: 11px; font-weight: 700; color: var(--wv-ink); }
.wv-laptop__job { margin-top: 7px; display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 9px; border: 1px solid #F0F0F0; }
.wv-laptop__job .wv-ava { width: 24px; height: 24px; border-radius: 6px; font-size: 7.5px; font-weight: 800; }
.wv-laptop__job strong { display: block; font-size: 9.5px; color: var(--wv-ink); }
.wv-laptop__job > span:last-child > span { font-size: 8.5px; color: var(--wv-green); font-weight: 600; }

.wv-num { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--wv-accent); color: #fff; display: grid; place-items: center; font-family: var(--wv-title); font-weight: 800; font-size: 17px; box-shadow: 0 6px 16px rgba(107, 71, 166, .35); }
.wv-num--2 { left: calc(85% - 22px); top: -16px; }
.wv-num--1 { left: -12px; bottom: 288px; }
.wv-num--3 { right: 166px; bottom: 362px; }

.wv-cv--tilt { left: 0; right: auto; bottom: 24px; width: 200px; height: 278px; transform: rotate(-4deg); }

.wv-mphone { position: absolute; right: 0; bottom: 0; width: 188px; height: 384px; border-radius: 30px; background: var(--wv-ink); padding: 8px; box-shadow: 0 24px 50px rgba(46, 26, 85, .28); font-family: system-ui, -apple-system, sans-serif; }
.wv-mphone__screen { height: 100%; border-radius: 23px; background: #F4F0FA; padding: 14px 10px; display: flex; flex-direction: column; gap: 9px; }
.wv-mphone__head { text-align: center; }
.wv-mphone__head b { display: block; font-size: 11px; font-weight: 800; color: var(--wv-ink); }
.wv-mphone__head span { font-size: 8.5px; font-weight: 700; color: #8A63C0; }
.wv-mphone__card { flex: 1; border-radius: 18px; background: #fff; padding: 12px; box-shadow: 0 6px 14px rgba(46, 26, 71, .12); }
.wv-mphone__co { font-size: 8px; font-weight: 700; color: #8A63C0; letter-spacing: .04em; text-transform: uppercase; }
.wv-mphone__t { margin-top: 5px; font-size: 13px; font-weight: 800; line-height: 1.2; color: var(--wv-ink); }
.wv-mphone__tags { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }
.wv-mphone__tags span { padding: 3px 7px; border-radius: 999px; background: #F5F4F8; font-size: 8px; font-weight: 600; color: #4A4658; }
.wv-mphone__why { margin-top: 9px; border-radius: 10px; background: #F0FDF4; padding: 7px; font-size: 8px; color: #166534; }
.wv-mphone__why b { display: block; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.wv-mphone__btns { display: flex; justify-content: center; gap: 12px; }
.wv-mphone__btns span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid #FBD5D6; color: #E5484D; }
.wv-mphone__btns span + span { background: #8A63C0; border: 0; color: #fff; }
.wv-mphone__btns svg { width: 15px; height: 15px; }

.wv-notif { position: absolute; right: 150px; bottom: 40px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 13px; background: #fff; box-shadow: 0 14px 30px rgba(46, 26, 85, .18); font-size: 11.5px; line-height: 1.3; color: var(--wv-ink); }
.wv-notif__ico { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #F1EAFB; color: var(--wv-violet); display: grid; place-items: center; }
.wv-notif__ico svg { width: 14px; height: 14px; }
.wv-notif span span { color: var(--wv-muted); }

.wv-legend { margin-top: 40px; text-align: left; }
.wv-legend__item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: #fff; }
.wv-legend__n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wv-accent); color: #fff; display: grid; place-items: center; font-family: var(--wv-title); font-weight: 800; }
.wv-legend__item strong { display: block; font-size: 15.5px; color: var(--wv-ink); }
.wv-legend__item span span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--wv-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — CANDIDAT CONNECTÉ
   ══════════════════════════════════════════════════════════════════════════ */

.wv-visi-row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--wv-ui); }
.wv-visi-row a { font-size: 13.5px; font-weight: 600; color: var(--wv-violet); }

.wv-compl { margin-top: 24px; max-width: 520px; border-radius: 16px; background: #fff; border: 1px solid var(--wv-cream-bd); padding: 18px 20px; font-family: var(--wv-ui); }
.wv-compl__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--wv-ink); }
.wv-compl__top strong + strong { color: var(--wv-violet); }
.wv-compl__bar { margin-top: 10px; height: 8px; border-radius: 6px; background: #F1F0F5; overflow: hidden; }
.wv-compl__bar i { display: block; height: 100%; border-radius: 6px; background: var(--wv-accent); }
.wv-compl__p { margin: 12px 0 8px; font-size: 13px; color: var(--wv-grey); }
.wv-compl__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-chipadd { padding: 7px 12px; border-radius: 100px; border: 1px dashed #C4A8E8; font-size: 13px; font-weight: 600; color: var(--wv-violet); background: #fff; }
.wv-chipadd:hover { background: var(--wv-pastel-2); color: var(--wv-violet); }

.wv-qtile { position: relative; border-radius: 20px; background: #fff; border: 1px solid var(--wv-cream-bd); padding: 18px; color: var(--wv-ink); min-height: 124px; display: flex; flex-direction: column; gap: 8px; }
.wv-qtile:hover { border-color: var(--wv-lav); color: var(--wv-ink); }
.wv-qtile__ico { width: 40px; height: 40px; border-radius: 12px; background: #F1EAFB; color: #8A63C0; display: grid; place-items: center; }
.wv-qtile__ico svg { width: 19px; height: 19px; }
.wv-qtile__n { font-family: var(--wv-title); font-size: 26px; font-weight: 700; line-height: 1; }
.wv-qtile__l { font-size: 13.5px; color: var(--wv-muted); }
.wv-qtile__dot { position: absolute; right: 16px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; }

.wv-banner-link { margin-top: 12px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #F4F0FA; border: 1px solid #E3D8F5; color: var(--wv-ink); }
.wv-banner-link:hover { border-color: var(--wv-lav); color: var(--wv-ink); }
.wv-banner-link__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #8A63C0; color: #fff; display: grid; place-items: center; }
.wv-banner-link__ico svg { width: 20px; height: 20px; }
.wv-banner-link__body { flex: 1; min-width: 0; }
.wv-banner-link__body strong { display: block; font-size: 16px; }
.wv-banner-link__body span { font-size: 13px; color: var(--wv-muted); }
.wv-banner-link > svg { flex: none; width: 18px; height: 18px; color: #9A93AE; }

/* Les offres, en cartes (application). */
.wv-job { border-radius: 16px; background: #fff; border: 1px solid #F0F0F0; padding: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--wv-ink); }
.wv-job:hover { border-color: var(--wv-lav); color: var(--wv-ink); }
.wv-job__top { display: flex; gap: 12px; align-items: flex-start; }
.wv-job__top .wv-ava { width: 44px; height: 44px; border-radius: 10px; font-family: var(--wv-title); font-weight: 800; font-size: 14px; }
.wv-job__id { flex: 1; min-width: 0; }
.wv-job__t { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.wv-job__co { font-size: 13px; color: #666; }
.wv-job__score { align-self: flex-start; padding: 4px 9px; border-radius: 100px; background: #F0FDF4; color: #166534; font-size: 12px; font-weight: 700; }
.wv-job__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wv-job__tags span { padding: 4px 9px; border-radius: 8px; background: #F5F5F5; font-size: 12px; color: var(--wv-ink); }
.wv-job__sal { font-size: 13.5px; font-weight: 600; color: var(--wv-green); }

/* « Ce que voient les recruteurs ». */
.wv-seen { border-radius: 18px; background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.wv-seen__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wv-seen__fig { height: 170px; border-radius: 10px; }
.wv-seen__fig--cv { background: var(--wv-cream); border: 1px solid var(--wv-cream-line); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.wv-seen__paper { width: 150px; height: 150px; border-radius: 6px 6px 0 0; background: #fff; box-shadow: 0 8px 20px rgba(46, 26, 85, .12); display: flex; overflow: hidden; }
.wv-seen__paper > i { flex: 0 0 32%; background: #EEF3FD; }
.wv-seen__paper > span { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.wv-seen__paper b { font-family: var(--wv-title); font-weight: 800; font-size: 9px; color: var(--wv-ink); }
.wv-seen__paper small { font-size: 6.5px; color: #2563EB; font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid #2563EB; margin-bottom: 2px; }
.wv-seen__fig--video { border: 2px dashed #E8DEFF; background: #FDFBFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 12px; font-size: 13px; color: var(--wv-muted); }
.wv-seen__fig--video svg { width: 30px; height: 30px; color: #C4A8E8; }
.wv-seen__fig--video.is-on { border-style: solid; border-color: #CFE9D8; background: #F3FBF6; color: var(--wv-green); }
.wv-seen__fig--video.is-on svg { color: #16A34A; }
.wv-seen__fig--port { background: var(--wv-soft); padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--wv-muted); }
.wv-seen__url { padding: 9px 11px; border-radius: 9px; background: #fff; border: 1px solid #ECE8F3; font-size: 12.5px; font-family: ui-monospace, monospace; color: var(--wv-ink); overflow-wrap: anywhere; }
.wv-seen__btns { display: flex; gap: 8px; margin-top: auto; }
.wv-seen__btns .wv-btn { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — ENTREPRISE CONNECTÉE
   ══════════════════════════════════════════════════════════════════════════ */

.wv-stat { border-radius: 16px; background: #fff; border: 1px solid var(--wv-cream-bd); padding: 14px; color: var(--wv-ink); }
a.wv-stat:hover { border-color: var(--wv-lav); color: var(--wv-ink); }
.wv-stat strong { display: block; font-family: var(--wv-title); font-size: 24px; }
.wv-stat span { font-size: 12.5px; color: var(--wv-muted); }

.wv-recv { border-radius: 20px; background: #fff; border: 1px solid var(--wv-cream-bd); box-shadow: 0 22px 50px rgba(46, 26, 85, .1); overflow: hidden; }
.wv-recv__head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--wv-line-2); }
.wv-recv__head strong { font-size: 15px; }
.wv-recv__head a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--wv-violet); }
.wv-recv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #F7F4FB; }
.wv-recv__row:last-child { border-bottom: 0; }
.wv-recv__who { flex: 1 1 180px; min-width: 0; }
.wv-recv__who strong { display: block; font-size: 14px; }
.wv-recv__who > span { font-size: 12.5px; color: var(--wv-muted); }
.wv-recv__docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wv-recv__doc { padding: 3px 8px; border-radius: 6px; background: #F2EDFA; color: var(--wv-violet); font-size: 11px; }
.wv-recv__empty { padding: 28px 20px; font-size: 14px; color: var(--wv-muted); text-align: center; }
.wv-recv__act [hidden] { display: none !important; }
.wv-recv__act form { margin: 0; }
.wv-recv__done { display: inline-flex; align-items: center; gap: 6px; }
.wv-recv__err { margin: 6px 0 0; font-size: 12px; color: #B42318; }
.wv-recv--mini .wv-recv__row { border-bottom: 0; padding: 10px 16px; }
.wv-recv--mini .wv-recv__list { padding: 6px 0; display: flex; flex-direction: column; gap: 0; }

.wv-table-wrap { margin-top: 20px; border: 1px solid var(--wv-line); border-radius: 16px; overflow-x: auto; }
.wv-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; color: var(--wv-ink); }
.wv-table thead tr { background: var(--wv-soft); }
.wv-table th,
.wv-table td { text-align: left; padding: 14px 18px; vertical-align: middle; }
.wv-table thead th { padding: 13px 18px; color: var(--wv-muted); font-weight: 600; }
.wv-table tbody tr { border-top: 1px solid var(--wv-line-2); }
.wv-table tbody th { font-weight: 600; }
.wv-table tbody th small { display: block; font-weight: 400; font-size: 12.5px; color: var(--wv-muted); }
.wv-table .wv-muted { color: var(--wv-muted); }
.wv-table .wv-right { text-align: right; }
.wv-table a { font-weight: 600; font-size: 13px; color: var(--wv-violet); }

.wv-prof { position: relative; border-radius: 18px; background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; color: var(--wv-ink); }
.wv-prof__who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.wv-prof__who strong { display: block; font-size: 15px; }
.wv-prof__who span span { font-size: 12.5px; color: var(--wv-muted); }
.wv-prof__btns { display: flex; gap: 8px; margin-top: auto; }
.wv-prof__btns .wv-btn { flex: 1; }
.wv-prof--lock .wv-prof__who,
.wv-prof--lock .wv-tags { filter: blur(3px); }
.wv-prof__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, .74); text-align: center; padding: 16px; }
.wv-prof__lock svg { width: 22px; height: 22px; color: var(--wv-violet); }
.wv-prof__lock strong { font-size: 14px; }

.wv-space { border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.wv-space--hn { background: var(--wv-mag-bg); border: 1px solid #F1DCEA; }
.wv-space--wp { background: var(--wv-pastel); border: 1px solid var(--wv-lav-3); }
.wv-space strong { font-size: 17px; }
.wv-space > span { font-size: 14.5px; line-height: 1.55; color: var(--wv-text); }
.wv-space .wv-btn { align-self: flex-start; margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE BUSINESS
   ══════════════════════════════════════════════════════════════════════════ */

/* Le bandeau de formule (entreprise connectée). */
.wv-formula { background: var(--wv-deep); color: #fff; font-family: var(--wv-ui); }
.wv-formula .wv-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.wv-formula a { margin-left: auto; color: var(--wv-lav); font-weight: 700; }
.wv-formula a:hover { color: #fff; }

/* L'avis du compte candidat sur /business. */
.wv-notice { background: #FFF7E6; border-bottom: 1px solid #F6E3B8; font-family: var(--wv-ui); }
.wv-notice .wv-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; padding-bottom: 14px; }
.wv-notice svg { flex: none; width: 20px; height: 20px; color: #B45309; }
.wv-notice p { flex: 1 1 420px; margin: 0; font-size: 14.5px; line-height: 1.5; color: #5C3B06; }
.wv-notice button,
.wv-notice a { border: 0; background: none; padding: 0; font: 700 14px var(--wv-ui); color: #8A4B06; cursor: pointer; }
.wv-notice button:hover,
.wv-notice a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wv-bhero { position: relative; overflow: hidden; background: var(--wv-pastel); padding: 72px 0 80px; font-family: var(--wv-ui); }
.wv-bhero--me { padding: 64px 0 72px; }
.wv-bhero__deco { left: -120px; bottom: -60px; }
.wv-bhero__grid { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.wv-bhero__txt { flex: 1 1 420px; min-width: 0; }
.wv-bhero__vis { flex: 1 1 460px; min-width: 0; position: relative; min-height: 480px; }
.wv-bhero__vis--flat { min-height: 0; }

.wv-cvt { position: absolute; left: 40px; top: 0; right: 0; border-radius: 18px; background: #fff; box-shadow: 0 26px 60px rgba(46, 26, 85, .16); overflow: hidden; }
.wv-bhero__vis--flat .wv-cvt,
.wv-bhero__vis--flat .wv-recv { position: static; }
.wv-cvt__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #EFE9F8; }
.wv-cvt__head > span:first-child { font-weight: 700; font-size: 13.5px; }
.wv-cvt__head .wv-pill { margin-left: auto; }
.wv-cvt__body { padding: 16px; }
.wv-cvt__search { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--wv-lav-3); color: var(--wv-muted); font-size: 13px; }
.wv-cvt__search svg { width: 15px; height: 15px; }
.wv-cvt__filters { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.wv-cvt__filters span { padding: 5px 10px; border-radius: 100px; background: #F2EEF8; font-size: 11.5px; color: var(--wv-ink); }
.wv-cvt__filters .is-on { background: var(--wv-accent); color: #fff; font-weight: 600; }
.wv-cvt__rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.wv-cvt__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--wv-soft); }
.wv-cvt__row .wv-ava { width: 38px; height: 38px; }
.wv-cvt__row > span:nth-child(2) { flex: 1; min-width: 0; }
.wv-cvt__row strong { display: block; font-size: 13.5px; color: var(--wv-ink); }
.wv-cvt__row small { font-size: 12px; color: var(--wv-muted); }
.wv-dispo { flex: none; padding: 3px 9px; border-radius: 100px; background: #E6F6EC; color: #1E7A43; font-size: 11px; font-weight: 700; }
.wv-dispo--listen { background: #FFF3E0; color: #9A5B00; }

.wv-floatcard { position: absolute; left: 0; bottom: 12px; width: 250px; border-radius: 16px; background: var(--wv-deep); color: #fff; padding: 16px; box-shadow: 0 20px 40px rgba(46, 26, 85, .3); }
.wv-floatcard p { margin: 0; }
.wv-floatcard__k { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--wv-lav); text-transform: uppercase; }
.wv-floatcard__who { margin-top: 8px !important; font-weight: 600; font-size: 14px; }
.wv-floatcard__docs { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.wv-floatcard__docs span { padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .12); font-size: 11.5px; }
.wv-floatcard__ok { display: inline-block; margin-top: 12px; padding: 7px 11px; border-radius: 8px; background: #22A35A; font-size: 12px; font-weight: 700; }

.wv-zero { position: absolute; right: -39px; bottom: 61px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(46, 26, 85, .16); text-align: center; }
.wv-zero p { margin: 0; font-size: 11.5px; color: var(--wv-muted); }
.wv-zero strong { display: block; margin-top: 2px; font-family: var(--wv-title); font-weight: 800; font-size: 28px; color: var(--wv-violet); }

/* La bande des chiffres et des entreprises. */
.wv-strip { padding: 36px 0; border-bottom: 1px solid #F0EBF8; }
.wv-strip__row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.wv-strip__stat { margin: 0; font-size: 15px; line-height: 1.35; color: var(--wv-text); }
.wv-strip__stat strong { font-family: var(--wv-title); font-size: 26px; color: var(--wv-violet); }
.wv-strip .wv-proof__cos { margin-left: auto; }

/* ── Les onglets (fonctionnalités, essentiel) ───────────────────────── */
.wv-tablist { margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-radius: 14px; background: #F6F2FC; width: max-content; max-width: 100%; }
.wv-tab { padding: 11px 20px; border: 0; border-radius: 10px; background: transparent; color: var(--wv-text); font: 600 14.5px var(--wv-ui); cursor: pointer; }
.wv-tab:hover { background: #fff; }
.wv-tab.is-active,
.wv-tab[aria-selected="true"] { background: var(--wv-deep); color: #fff; }
.wv-tablist--pills { background: transparent; padding: 0; gap: 8px; margin-top: 24px; }
.wv-tablist--pills .wv-tab { border: 1.5px solid var(--wv-lav-3); border-radius: 100px; background: #fff; padding: 10px 18px; font-size: 14px; }
.wv-tablist--pills .wv-tab.is-active,
.wv-tablist--pills .wv-tab[aria-selected="true"] { border-color: var(--wv-deep); background: var(--wv-deep); color: #fff; }

/* Sans script, tous les panneaux s'affichent l'un sous l'autre et les
   onglets se cachent : rien n'est inaccessible. */
[data-wv-tabs]:not(.is-ready) > .wv-tablist,
[data-wv-tabs]:not(.is-ready) .wv-hire__tabs > button { display: none; }
[data-wv-tabs].is-ready [data-wv-panel]:not(.is-active) { display: none; }
[data-wv-tabs]:not(.is-ready) [data-wv-panel] + [data-wv-panel] { margin-top: 16px; }

.wv-tabpanel { margin-top: 32px; border: 1px solid var(--wv-line); border-radius: 22px; padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: #fff; }
.wv-tabpanel > .wv-col { flex: 1 1 360px; min-width: 0; }
.wv-tabpanel__vis { flex: 1 1 440px; min-width: 0; min-height: 340px; border-radius: 18px; background: var(--wv-deep); position: relative; overflow: hidden; padding: 32px; display: grid; place-items: center; }
.wv-tabpanel__vis .wv-deco { right: -40px; top: -30px; }
.wv-tabpanel__card { position: relative; width: 100%; max-width: 340px; border-radius: 22px; background: #fff; padding: 18px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); color: var(--wv-ink); }
.wv-tabpanel__card--wide { max-width: 420px; }
.wv-tabpanel__who { display: flex; align-items: center; gap: 12px; }
.wv-tabpanel__who .wv-ava { width: 46px; height: 46px; }
.wv-tabpanel__who strong { display: block; font-size: 14.5px; }
.wv-tabpanel__who small { font-size: 12.5px; color: var(--wv-muted); }
.wv-tabpanel__card .wv-tags { margin-top: 14px; }
.wv-tabpanel__card .wv-btns { margin-top: 14px; flex-wrap: nowrap; gap: 8px; }
.wv-tabpanel__card .wv-btns > span { flex: 1; text-align: center; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.wv-fake-primary { background: var(--wv-accent); color: #fff; }
.wv-fake-ghost { border: 1.5px solid var(--wv-lav-3); color: var(--wv-ink); font-weight: 600 !important; }
.wv-minikb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wv-minikb > div { border-radius: 10px; background: var(--wv-soft); padding: 8px; min-width: 0; }
.wv-minikb p,
.wv-minikb__h { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; color: var(--wv-muted); }
.wv-minikb span { display: block; margin-top: 6px; padding: 7px 8px; border-radius: 8px; background: #fff; border: 1px solid #EFE9F8; font-size: 11px; line-height: 1.3; }
.wv-minikb span small { display: block; color: var(--wv-muted); font-size: 10px; }
.wv-minikb .is-hot { border: 2px solid var(--wv-lav); }
.wv-aiw__lbl { font-size: 11px; font-weight: 700; color: var(--wv-muted); letter-spacing: .04em; text-transform: uppercase; }
.wv-aiw__in { margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--wv-lav-3); font-size: 13px; }
.wv-aiw__out { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--wv-pastel); font-size: 12.5px; line-height: 1.55; color: var(--wv-text); }
.wv-aiw__out b { display: flex; align-items: center; gap: 6px; color: var(--wv-violet); font-size: 12px; margin-bottom: 6px; }
.wv-aiw__out b svg { width: 14px; height: 14px; }

/* ── Prêt en trois temps ───────────────────────────────────────────── */
.wv-when { border-radius: 14px; background: #fff; padding: 22px; border: 1px solid var(--wv-lav-3); }
.wv-when p { margin: 0; }
.wv-when__k { font-size: 12.5px; font-weight: 700; color: var(--wv-violet); }
.wv-when__t { margin-top: 8px !important; font-weight: 600; font-size: 16px; color: var(--wv-ink); }
.wv-when__p { margin-top: 8px !important; font-size: 14px; line-height: 1.5; color: var(--wv-muted); }

/* ── Tarifs ─────────────────────────────────────────────────────────── */
.wv-offer0 { margin: 36px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 16px; background: var(--wv-pastel); border: 1px solid var(--wv-lav-3); }
.wv-offer0 > div { flex: 1 1 360px; }
.wv-offer0 strong { font-size: 17px; color: var(--wv-ink); }
.wv-offer0 p,
.wv-offer0__p { margin: 6px 0 0; font-size: 14.5px; color: var(--wv-text); }
.wv-plans { margin: 24px auto 0; max-width: 860px; }
.wv-plan { position: relative; border-radius: 18px; border: 1px solid var(--wv-line); background: #fff; padding: 30px; text-align: center; display: flex; flex-direction: column; color: var(--wv-ink); }
.wv-plan--featured { border: 0; background: var(--wv-deep); color: #fff; box-shadow: 0 20px 44px rgba(46, 26, 85, .22); }
.wv-plan--current { border: 2px solid var(--wv-accent); }
.wv-plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 100px; background: var(--wv-lav); color: #2E1A55; font-size: 12px; font-weight: 700; white-space: nowrap; }
.wv-plan__badge--current { background: var(--wv-accent); color: #fff; }
.wv-plan__name { margin: 0; font-weight: 700; font-size: 17px; }
.wv-plan__price { margin: 12px 0 0; font-family: var(--wv-title); font-weight: 800; font-size: 44px; line-height: 1.1; }
.wv-plan__old { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .55); text-decoration: line-through; }
.wv-plan:not(.wv-plan--featured) .wv-plan__old { color: #A8A1B8; }
.wv-plan__unit { margin: 2px 0 0; font-size: 13px; color: var(--wv-muted); }
.wv-plan--featured .wv-plan__unit { color: rgba(255, 255, 255, .75); }
.wv-plan .wv-checks { margin-top: 22px; text-align: left; gap: 10px; font-size: 14.5px; color: inherit; }
.wv-plan--featured .wv-checks > li::before { color: var(--wv-lav); }
.wv-plan__cta { margin-top: auto; padding-top: 24px; }
.wv-plan__cta .wv-btn { width: 100%; }
/* Sous « Choisir Premium » (visiteur) : la suite du parcours — compte,
   puis paiement Stripe. Pas de formulaire de contact. */
.wv-plan__how { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--wv-muted); }
.wv-plan--featured .wv-plan__how { color: rgba(255, 255, 255, .78); }

/* ── L'inscription, sur la page ──────────────────────────────────── */
.wv-signup { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; border-radius: 24px; background: var(--wv-pastel); padding: 52px 48px; }
.wv-signup > *:not(.wv-deco) { position: relative; }
.wv-signup .wv-deco { left: -90px; bottom: -110px; }
.wv-signup__txt { flex: 1 1 380px; min-width: 0; }
.wv-signup__txt .wv-h2 { font-size: clamp(28px, 3.6cqi, 42px); line-height: 1.08; letter-spacing: -.03em; }
.wv-signup__form { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.wv-gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--wv-lav-2); background: #fff; font: 600 15px var(--wv-ui); color: var(--wv-ink); }
.wv-gbtn:hover { background: var(--wv-pastel-2); color: var(--wv-ink); }
.wv-gbtn svg { width: 18px; height: 18px; }
.wv-or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #7A7690; }
.wv-or::before,
.wv-or::after { content: ''; flex: 1; height: 1px; background: var(--wv-lav-2); }
.wv-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--wv-text); }
.wv-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--wv-lav-3); background: #fff; font: 15px var(--wv-ui); color: var(--wv-ink); }
.wv-input:focus { outline: none; border-color: var(--wv-accent); box-shadow: 0 0 0 3px rgba(138, 99, 193, .18); }
.wv-legal { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--wv-muted); }
.wv-legal a { color: var(--wv-violet); text-decoration: underline; text-underline-offset: 2px; }
.wv-legal .wr-legal-accept,
.wv-legal .wr-legal-mention { margin: 0; font-size: 12.5px; }

/* ── Recrutez en 3 étapes ──────────────────────────────────────────── */
.wv-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 28px; }
.wv-steps > li { display: flex; gap: 18px; margin: 0; }
.wv-steps__n { flex: none; font-family: var(--wv-title); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--wv-violet); }
.wv-steps strong { display: block; font-size: 18px; color: var(--wv-ink); }
.wv-steps li > span:last-child > span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--wv-text); }
.wv-illus { margin-top: 32px; height: 260px; border-radius: 20px; background: #fff; display: grid; place-items: center; border: 1px solid var(--wv-lav-3); }
.wv-illus svg { width: 230px; height: auto; max-width: 90%; }

/* ── Le tableau de suivi (kanban) ──────────────────────────────────── */
.wv-kb-wrap { margin-top: 36px; border-radius: 22px; background: var(--wv-pastel); padding: 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.wv-kb-intro { flex: 0 1 260px; border-radius: 16px; background: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.wv-kb-intro p,
.wv-kb-intro__p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wv-text); }
.wv-kb-intro .wv-btn { align-self: flex-start; margin-top: 18px; }
.wv-kb { flex: 1 1 520px; min-width: 0; border-radius: 16px; background: #fff; padding: 18px; overflow-x: auto; }
/* 520 px au moins : avec la sidebar, la colonne Recruté tient encore à
   1 440 px sans faire défiler le tableau. */
.wv-kb__cols { display: grid; grid-template-columns: repeat(4, minmax(118px, 1fr)); gap: 12px; min-width: 520px; }
.wv-kb__col { border-radius: 12px; background: var(--wv-soft); padding: 12px; }
.wv-kb__col > p,
.wv-kb__h { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--wv-muted); }
.wv-kb__card { border-radius: 10px; background: #fff; padding: 10px; border: 1px solid #EFE9F8; font-size: 12.5px; line-height: 1.45; color: var(--wv-ink); }
.wv-kb__card + .wv-kb__card { margin-top: 8px; }
.wv-kb__card span { display: block; color: var(--wv-muted); }
.wv-kb__card .wv-recv__doc { display: inline-block; margin-top: 6px; }
.wv-kb__card--hot { border: 2px solid var(--wv-lav); }
.wv-kb__card--won { background: #E6F6EC; border-color: #E6F6EC; }
.wv-kb__card--won span { color: #1E7A43; }

/* ── L'application Hiring Notes ────────────────────────────────────── */
.wv-hn { border-radius: 16px; background: #fff; box-shadow: 0 24px 54px rgba(123, 46, 96, .16); overflow: hidden; display: flex; font-family: 'Plus Jakarta Sans', var(--wv-ui); }
.wv-hn__side { flex: 0 0 140px; padding: 16px 12px; border-right: 1px solid #EAE7F2; display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: #22223B; }
.wv-hn__side strong { font-size: 13px; color: #1B1B3A; }
.wv-hn__switch { margin: 6px 0; display: flex; border-radius: 100px; background: #F4F2F9; padding: 3px; font-size: 9.5px; font-weight: 700; }
.wv-hn__switch span { flex: 1; text-align: center; padding: 4px; color: #7A7690; }
.wv-hn__switch .is-on { border-radius: 100px; background: #fff; color: #22223B; }
.wv-hn__sec { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: #9A93AE; text-transform: uppercase; margin-top: 4px; }
.wv-hn__item { padding: 6px 8px; }
.wv-hn__item.is-on { border-radius: 8px; background: var(--wv-mag-bg); color: var(--wv-mag); font-weight: 700; }
.wv-hn__main { flex: 1; min-width: 0; background: #F4F2F9; }
.wv-hn__bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #fff; border-bottom: 1px solid #EAE7F2; }
.wv-hn__bar strong { font-size: 12.5px; color: #1B1B3A; }
.wv-hn__bar .wv-pill { font-size: 9.5px; padding: 3px 8px; }
.wv-hn__tools { margin-left: auto; padding: 5px 10px; border-radius: 20px; background: #1B1B3A; color: #fff; font-size: 9.5px; font-weight: 700; }
.wv-hn__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.wv-hn__welcome { border-radius: 14px; background: linear-gradient(120deg, #C73E9B, #7B2E60); color: #fff; padding: 16px; }
.wv-hn__welcome b { display: block; font-size: 14px; }
.wv-hn__welcome small { display: block; margin-top: 4px; font-size: 10.5px; opacity: .9; }
.wv-hn__welcome span { display: inline-block; margin-top: 10px; padding: 6px 10px; border-radius: 20px; background: #fff; color: var(--wv-mag-d); font-size: 10px; font-weight: 700; }
.wv-hn__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wv-hn__kpi { border-radius: 12px; background: #fff; padding: 10px; }
.wv-hn__kpi i { display: block; width: 20px; height: 20px; border-radius: 6px; background: var(--wv-mag-bg); }
.wv-hn__kpi strong { display: block; margin-top: 6px; font-size: 16px; color: #1B1B3A; }
.wv-hn__kpi span { font-size: 9.5px; color: #7A7690; }
.wv-roles { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.wv-role { flex: 1 1 200px; border-radius: 14px; background: #fff; padding: 16px; }
.wv-role strong { display: block; font-size: 14.5px; color: var(--wv-ink); }
.wv-role span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--wv-muted); }

/* ── Le formulaire de mission Whileproject ─────────────────────────── */
.wv-wpf { border-radius: 18px; background: #fff; border: 1px solid #EEF1F7; padding: 24px; box-shadow: 0 18px 40px rgba(46, 26, 85, .08); font-family: var(--wv-title); color: var(--wv-ink); }
.wv-wpf > p,
.wv-wpf__title { margin: 0; font-weight: 700; font-size: 17px; color: var(--wv-ink); }
.wv-wpf__lbl { display: block; margin-top: 14px; font-size: 11.5px; font-weight: 700; color: var(--wv-grey); }
.wv-wpf__in { margin-top: 6px; padding: 11px 12px; border-radius: 10px; border: 1px solid #E5E9F0; font-size: 13px; }
.wv-wpf__row { display: flex; flex-wrap: wrap; gap: 12px; }
.wv-wpf__row > div { flex: 1 1 160px; }
.wv-wpf__seg { margin-top: 6px; display: flex; border-radius: 10px; background: #F2EDFA; padding: 3px; font-size: 12px; font-weight: 600; }
.wv-wpf__seg span { flex: 1; text-align: center; padding: 7px; color: var(--wv-grey); }
.wv-wpf__seg .is-on { border-radius: 8px; background: #fff; color: var(--wv-violet); }
.wv-wpf .wv-tags { margin-top: 6px; }
.wv-wpf .wv-tags span { padding: 4px 10px; border-radius: 100px; background: #F2EDFA; color: var(--wv-violet); font-size: 11.5px; }
.wv-wpf .wv-tags .is-add { background: transparent; border: 1px dashed #C4A8E8; }
.wv-wpf__check { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wv-wpf__check i { width: 18px; height: 18px; border-radius: 5px; background: var(--wv-accent); display: grid; place-items: center; color: #fff; }
.wv-wpf__check i svg { width: 11px; height: 11px; }
.wv-wpf__foot { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; font-family: var(--wv-ui); }
.wv-wpf__foot span { padding: 10px 14px; border-radius: 10px; border: 1px solid #E5E9F0; font-size: 12.5px; font-weight: 600; color: var(--wv-text); }
.wv-wpf__foot span + span { border: 0; background: var(--wv-accent); color: #fff; font-weight: 700; }

/* ── L'essentiel à savoir ──────────────────────────────────────────── */
.wv-ess { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; border-radius: 22px; background: var(--wv-pastel); padding: 36px; }
.wv-ess > .wv-col { flex: 1 1 320px; min-width: 0; }
.wv-ess .wv-checks > li { padding-left: 0; }
.wv-ess .wv-checks > li::before { content: none; }
.wv-ess .wv-checks { gap: 12px; margin-top: 16px; line-height: 1.5; }
.wv-ess__table { flex: 1 1 440px; min-width: 0; overflow-x: auto; border-radius: 16px; background: #fff; }
.wv-cmp { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 14px; color: var(--wv-ink); }
.wv-cmp th,
.wv-cmp td { text-align: left; padding: 12px 16px; }
.wv-cmp thead th { padding: 14px 16px; color: var(--wv-muted); font-weight: 600; }
.wv-cmp thead th.is-us { color: var(--wv-violet); font-weight: 700; }
.wv-cmp tbody tr { border-top: 1px solid #F0EBF8; }
.wv-cmp tbody th { font-weight: 600; }
.wv-cmp tbody td + td { color: var(--wv-muted); }

/* ── Le CTA final de /business ─────────────────────────────────────── */
.wv-bfinal { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; border-radius: 24px; background: var(--wv-deep); padding: 56px 48px; color: #fff; }
.wv-bfinal > *:not(.wv-deco) { position: relative; z-index: 1; }
.wv-bfinal__d1 { right: -110px; top: -150px; opacity: .8; }
.wv-bfinal__d2 { left: -90px; bottom: -110px; }
.wv-bfinal__txt { flex: 1 1 420px; min-width: 0; }
.wv-bfinal__txt .wv-h2 { color: #fff; font-size: clamp(28px, 3.8cqi, 44px); line-height: 1.08; letter-spacing: -.03em; }
.wv-bfinal__txt p,
.wv-bfinal__p { margin: 14px 0 0; max-width: 460px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.wv-bfinal__zero { flex: 0 1 320px; min-width: 0; }
.wv-bfinal__zero p { margin: 0; }
.wv-bfinal__big { font-family: var(--wv-title); font-weight: 800; font-size: clamp(64px, 9cqi, 112px); line-height: .9; letter-spacing: -.04em; color: var(--wv-lav); }
.wv-bfinal__lbl { margin-top: 12px !important; font-size: 16px; font-weight: 600; }
.wv-bfinal .wv-checks { margin-top: 14px; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.wv-bfinal .wv-checks > li::before { color: var(--wv-lav); }

/* ══════════════════════════════════════════════════════════════════════════
   LES BLOCS DYNAMIQUES DE L'ÉDITEUR, DANS CES PAGES
   ══════════════════════════════════════════════════════════════════════════ */

/* Les articles et la FAQ gardent leur style ; ils respirent comme le reste. */
.wv-vitrine .wr-html + .wr-section { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DANS LA COQUILLE — LES SECTIONS COLORÉES DEVIENNENT DES CARTES

   La sidebar est revenue : un fond de couleur qui s'arrêtait net contre
   elle et contre le bord droit se lisait comme une bande coupée. Dans la
   colonne, les sections à fond (hero, crème, pastel, final) sont donc
   arrondies, avec une respiration entre deux d'entre elles. Sans sidebar
   (`wr-shell--full`, l'application mobile), elles restent pleine largeur.
   ══════════════════════════════════════════════════════════════════════════ */
.wr-shell:not(.wr-shell--full) .wv-hero,
.wr-shell:not(.wr-shell--full) .wv-bhero,
.wr-shell:not(.wr-shell--full) .wv-sec--cream,
.wr-shell:not(.wr-shell--full) .wv-sec--pastel,
.wr-shell:not(.wr-shell--full) .wv-sec--soft,
.wr-shell:not(.wr-shell--full) .wv-final { border-radius: 28px; }
.wr-shell:not(.wr-shell--full) .wv-sec--cream,
.wr-shell:not(.wr-shell--full) .wv-sec--pastel,
.wr-shell:not(.wr-shell--full) .wv-sec--soft { overflow: hidden; margin: 16px 0; }
.wr-shell:not(.wr-shell--full) .wv-hero,
.wr-shell:not(.wr-shell--full) .wv-sec--cream { border: 1px solid var(--wv-cream-line); }
.wr-shell:not(.wr-shell--full) .wv-final { overflow: hidden; }

/* Les deux bandeaux au-dessus du hero de /business (formule, avis) :
   des barres arrondies, détachées du hero. */
.wr-shell:not(.wr-shell--full) .wv-formula,
.wr-shell:not(.wr-shell--full) .wv-notice { border-radius: 16px; margin-bottom: 12px; }
.wr-shell:not(.wr-shell--full) .wv-notice { border: 1px solid #F6E3B8; }

/* ⚠️  SUR UN TÉLÉPHONE, UNE SEULE MARGE — CELLE DE LA COQUILLE.

       La coquille garde 16 px de chaque côté ; `.wv-wrap` en ajoutait 16 :
       32 px perdus de chaque côté d'un écran de 390, et des cartes de
       missions réduites à un mot par ligne. Dans la coquille, la marge
       passe donc du `.wv-wrap` aux seules sections colorées (les cartes),
       qui gardent leur respiration intérieure. */
@container (max-width: 720px) {
  .wr-shell:not(.wr-shell--full) .wv-wrap { padding-left: 0; padding-right: 0; }
  .wr-shell:not(.wr-shell--full) .wv-hero,
  .wr-shell:not(.wr-shell--full) .wv-bhero,
  .wr-shell:not(.wr-shell--full) .wv-sec--cream,
  .wr-shell:not(.wr-shell--full) .wv-sec--pastel,
  .wr-shell:not(.wr-shell--full) .wv-sec--soft,
  .wr-shell:not(.wr-shell--full) .wv-final,
  .wr-shell:not(.wr-shell--full) .wv-formula,
  .wr-shell:not(.wr-shell--full) .wv-notice { padding-left: 16px; padding-right: 16px; }
  .wr-shell:not(.wr-shell--full) .wv-hero,
  .wr-shell:not(.wr-shell--full) .wv-bhero,
  .wr-shell:not(.wr-shell--full) .wv-sec--cream,
  .wr-shell:not(.wr-shell--full) .wv-sec--pastel,
  .wr-shell:not(.wr-shell--full) .wv-sec--soft,
  .wr-shell:not(.wr-shell--full) .wv-final { border-radius: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SUR LA LARGEUR DU BLOC (`@container`), PAS DE LA FENÊTRE

   Les seuils sont ceux de l'ancienne version plein écran, appliqués à la
   largeur réelle de la colonne : avec la sidebar, un écran de 1 100 px
   ne laisse que ~690 px aux sections, qui passent donc en une colonne.

   ⚠️  UNE RÈGLE SUR LE CONTENEUR LUI-MÊME RESTE EN `@media`.

       `.wv-hire-sec` est un conteneur : une requête `@container` cherche
       un conteneur PARMI SES ANCÊTRES, et il n'y en a pas — la règle ne
       s'appliquerait jamais.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .wv-hire-sec { padding-bottom: 64px; }
}

@container (max-width: 1100px) {
  .wv-zero { right: 0; }
  .wv-num--3 { right: 150px; }
}

@container (max-width: 960px) {
  .wv-sec { padding: 64px 0; }
  .wv-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wv-s2,
  .wv-s3,
  .wv-s4 { grid-column: span 2; }
  .wv-trio,
  .wv-duo { grid-template-columns: minmax(0, 1fr); }
  .wv-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wv-hidesm,
  .wv-acc__lines { display: none !important; }
  .wv-acc__key { margin-bottom: 24px; }
  .wv-strip .wv-proof__cos,
  .wv-strip .wv-logos { margin-left: 0; }

  /* Le hero : la fenêtre de style passe dans le flux, le téléphone reste. */
  .wv-hero { padding: 48px 0 56px; }
  .wv-hero__vis { min-height: 0; padding-bottom: 0; }
  .wv-win { position: relative; left: auto; right: auto; top: auto; margin-left: 0; }
  .wv-hero .wv-cv,
  .wv-hero .wv-phone { display: none; }

  .wv-bhero { padding: 52px 0 60px; }
  .wv-bhero__vis { min-height: 0; }
  .wv-cvt { position: relative; left: auto; right: auto; top: auto; }
  .wv-floatcard { display: none; }
  .wv-zero { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 16px; }

  /* Les trois appareils : l'ordinateur seul, en pleine largeur. */
  .wv-devices { height: auto; }
  .wv-laptop { position: relative; left: auto; right: auto; height: auto; min-height: 340px; }
  .wv-laptop__base { position: relative; top: auto; left: auto; right: auto; margin: 0 -2%; }
  .wv-devices .wv-cv,
  .wv-devices .wv-mphone,
  .wv-devices .wv-notif,
  .wv-num { display: none; }
}

@container (max-width: 720px) {
  .wv-wrap { padding: 0 16px; }
  .wv-panel,
  .wv-ess,
  .wv-signup,
  .wv-bfinal { padding: 28px 20px; }
  .wv-tabpanel { padding: 22px; gap: 24px; }
  .wv-tabpanel__vis { padding: 22px 16px; min-height: 0; }
  .wv-hire__panel { padding: 24px 18px; }
  .wv-hire__tab { flex-basis: 50%; padding: 14px 10px; font-size: 14px; }
  .wv-hire__post { flex-basis: 100%; }
  .wv-hire__lead { font-size: 21px; }
  .wv-band { padding: 40px 18px; }
  .wv-laptop__body { flex-direction: column; }
  .wv-layouts { gap: 6px; }
  .wv-hn__side { display: none; }
  .wv-kb-wrap { padding: 16px; }
  .wv-tablist { width: 100%; }
  .wv-tab { flex: 1 1 auto; padding: 10px 12px; font-size: 13.5px; }
  .wv-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wv-hero__txt,
  .wv-bhero__txt,
  .wv-hero__side { flex-basis: 100%; }
  .wv-hero__vis,
  .wv-bhero__vis { flex-basis: 100%; }
  .wv-split > .wv-col,
  .wv-split > .wv-col--sm,
  .wv-split > .wv-col--lg,
  .wv-panel > .wv-col,
  .wv-panel > .wv-col--lg,
  .wv-panel > .wv-col--xl { flex-basis: 100%; }
  .wv-recv__head { flex-wrap: wrap; }
}

@container (max-width: 480px) {
  .wv-quad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .wv-qtile { padding: 14px; min-height: 0; }
  .wv-door { padding: 14px; gap: 12px; }
  .wv-door__ico { width: 44px; height: 44px; }
  .wv-mission { padding: 12px; gap: 10px; flex-wrap: wrap; }
  /* Le prix passe sous le titre : sans base, le corps (flex: 1) ne
     poussait jamais le prix à la ligne et se réduisait à un mot. */
  .wv-mission__body { flex-basis: calc(100% - 52px); }
  .wv-mission__price { margin-left: 52px; }
  .wv-proof__cos { gap: 12px 18px; }
}

/* La formule de l'entreprise connectée, cernée dans la grille tarifaire. */
.wv-aud-entreprise.wv-formule-gratuit .wv-plan[data-plan="free"],
.wv-aud-entreprise.wv-formule-premium .wv-plan[data-plan="premium"] { border: 2px solid var(--wv-accent); }
.wv-aud-entreprise.wv-formule-premium .wv-plan--featured[data-plan="premium"] { border-color: var(--wv-lav); }

/* Le fond des deux pages est blanc, comme les maquettes : le gris très clair
   du site laisserait voir la limite de chaque section sans fond. */
body.wv-vitrine { background: #fff; }

/* ⚠️  LE HTML DE L'ÉDITEUR VIT DANS `.wr-html`, QUI STYLE LES BALISES NUES.

       `.wr-html p:not([class])`, `li:not([class])` (wr-pages.css) donnent
       couleur et marges au HTML écrit à la main. Nos sections donnent une
       classe à chaque paragraphe ; les <li> des listes à coches n'en ont
       pas : on neutralise ici la marge qu'elles recevraient. */
.wr-html .wv-checks > li,
.wr-html .wv-bullets > li,
.wr-html .wv-steps > li,
.wr-html .wv-list > li { margin-bottom: 0; }
.wr-html .wv-checks,
.wr-html .wv-bullets,
.wr-html .wv-steps,
.wr-html .wv-list { padding-left: 0; list-style: none; }
.wr-html .wv-checks { margin-bottom: 0; }

/* Le titre des cartes d'offre : jamais coupé au milieu d'un mot. */
.wv-job__t,
.wv-mcard__t,
.wv-fiche__name { overflow-wrap: normal; word-break: normal; }

/* Sur un téléphone, les rubans décoratifs passent sous le texte : on les
   retire plutôt que de les voir couper un bouton ou un prix. */
@container (max-width: 720px) {
  .wv-deco { display: none; }
}

/* En japonais et en chinois, l'italique n'existe pas : le navigateur
   penche les idéogrammes, ce qui se lit mal. La couleur suffit. */
:lang(ja) .wv-vitrine em,
:lang(zh) .wv-vitrine em,
:lang(ja) .wv-em,
:lang(zh) .wv-em { font-style: normal; }

/* En japonais, les titres se coupent entre deux groupes de mots plutôt
   qu'au milieu d'un mot (« も／うあなた »). Ignoré par les navigateurs
   qui ne le connaissent pas. */
:lang(ja) .wv-h1,
:lang(ja) .wv-h2 { word-break: auto-phrase; }