/* Profil Talent, « Correspondance avec votre profil » and « Mes offres pour moi » (docs/2026-10-09-talent-profile-match.md).
   Plain CSS on the theme's colour tokens (tailwind.css @theme / html.dark), so dark mode follows by itself. */

:root { --mp-high: var(--color-green); --mp-good: var(--color-majorelle); --mp-mid: #c98a12; --mp-low: var(--color-faint); }
html.dark { --mp-mid: var(--color-saffron-ink); }

/* ---- the match panel of a job page ------------------------------------------------------------------------------ */
.mp { margin-top: 20px; border: 1px solid var(--color-majorelle-line); border-radius: var(--club-radius-card, 18px);
      background: linear-gradient(180deg, var(--color-majorelle-soft) 0%, var(--color-card) 140px); overflow: hidden; }
.mp-details > summary { list-style: none; cursor: pointer; }
.mp-details > summary::-webkit-details-marker { display: none; }
.mp-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.mp-head-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mp-title { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--color-ink); }
.mp-label { display: block; font-size: 13.5px; color: var(--color-muted); line-height: 1.45; }
.mp-label b { font-weight: 650; }
.mp-tier-high { color: var(--mp-high); } .mp-tier-good { color: var(--mp-good); }
.mp-tier-mid { color: var(--mp-mid); } .mp-tier-low { color: var(--color-ink-2); }
.mp-toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--color-muted); transition: transform .2s; }
.mp-details[open] .mp-toggle { transform: rotate(180deg); }
.mp-ring { --mp-c: var(--mp-good); position: relative; flex: none; display: grid; place-items: center; align-content: center; width: 60px; height: 60px;
           border-radius: 999px; background: conic-gradient(var(--mp-c) calc(var(--mp, 0) * 1%), var(--color-line) 0); }
.mp-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 999px; background: var(--color-card); }
.mp-ring > * { position: relative; }
.mp-ring b { font-size: 20px; font-weight: 750; line-height: 1; letter-spacing: -.03em; color: var(--color-ink); }
.mp-ring small { font-size: 10px; color: var(--color-muted); line-height: 1.1; }
.mp-ring.mp-high { --mp-c: var(--mp-high); } .mp-ring.mp-good { --mp-c: var(--mp-good); }
.mp-ring.mp-mid { --mp-c: var(--mp-mid); } .mp-ring.mp-low { --mp-c: var(--mp-low); }
.mp-ring-off, .mp-ring-wait { background: var(--color-majorelle-soft-2); color: var(--color-majorelle); }
.mp-ring-off::before, .mp-ring-wait::before { inset: 0; background: var(--color-majorelle-soft); }
.mp-ring-off .ic { width: 24px; height: 24px; }
.mp-dims { display: grid; gap: 2px; padding: 0 10px 6px; }
.mp-dim { padding: 10px 8px; border-top: 1px solid var(--color-line-2); }
.mp-dim-top { display: grid; grid-template-columns: minmax(96px, 168px) 1fr 34px; align-items: center; gap: 12px; }
.mp-dim-label { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.mp-bar { height: 8px; border-radius: 999px; background: var(--color-line-2); overflow: hidden; }
.mp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mp-good); }
.mp-bar i.mp-high { background: var(--mp-high); } .mp-bar i.mp-mid { background: var(--mp-mid); } .mp-bar i.mp-low { background: var(--mp-low); }
.mp-bar-na { background: repeating-linear-gradient(90deg, var(--color-line-2) 0 6px, transparent 6px 10px); }
.mp-dim-score { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mp-na { font-size: 12px; color: var(--color-faint); text-align: right; white-space: nowrap; }
.mp-dim-top:has(.mp-na) { grid-template-columns: minmax(96px, 168px) 1fr auto; }
.mp-reason { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--color-ink-2); overflow-wrap: anywhere; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mp-chips li { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12.5px; line-height: 1.3; }
.mp-chips .ic { width: 13px; height: 13px; }
.mp-chips .is-ok { background: var(--color-green-soft); color: var(--color-green-ink); border: 1px solid var(--color-green-line); }
.mp-chips .is-miss { background: var(--color-card); color: var(--color-ink-2); border: 1px dashed var(--color-line-strong); }
.mp-add { display: inline-flex; margin-left: 2px; }
/* a 40 px target around a small « + » (phone-desktop audit, 9 Oct); the negative margins keep the chip its height */
.mp-add button { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -12px -8px -10px; border-radius: 999px; color: var(--color-majorelle); }
.mp-add button:hover { background: var(--color-majorelle-soft); }
.mp-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 18px 10px; font-size: 12.5px; color: var(--color-muted); }
.mp-note .ic { width: 15px; height: 15px; margin-top: 2px; }
.mp-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--color-line-2); }
.mp-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--club-radius-control, 12px);
          border: 1px solid var(--color-line-strong); background: var(--color-card); color: var(--color-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.mp-btn:hover { background: var(--color-hover); }
.mp-btn .ic { width: 16px; height: 16px; }
.mp-btn-accent { border-color: var(--color-majorelle); background: var(--color-majorelle); color: var(--color-on-accent); }
.mp-btn-accent:hover { background: var(--color-majorelle-dark); color: var(--color-on-accent); }
.mp-invite { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 16px 18px; }
.mp-invite .mp-ring { width: 48px; height: 48px; }
.mp-upload, .mp-terms { grid-column: 1 / -1; }
.mp-upload { margin-top: 6px; }
.mp-file { position: relative; width: 100%; justify-content: center; min-height: 46px; text-align: center; }
.mp-file:focus-within { outline: 2px solid var(--color-majorelle); outline-offset: 2px; }
.mp-terms { font-size: 12px; color: var(--color-muted); }
.mp-terms a { text-decoration: underline; text-underline-offset: 2px; }
@media (width >= 40rem) {
  .mp-invite { grid-template-columns: auto 1fr auto; }
  .mp-upload { grid-column: auto; margin-top: 0; }
  .mp-file { width: auto; }
  .mp-terms { grid-column: 2 / -1; }
}
@media (width < 40rem) {
  .mp-head { padding: 14px; gap: 12px; }
  .mp-ring { width: 54px; height: 54px; }
  .mp-dims { padding: 0 6px 4px; }
  .mp-dim-top { grid-template-columns: 1fr 76px 30px; gap: 10px; }
  .mp-dim-top:has(.mp-na) { grid-template-columns: 1fr 40px auto; }
  .mp-foot { padding: 12px 14px 14px; }
  .mp-foot .mp-btn { flex: 1 1 100%; justify-content: center; }
  .mp-dim[data-key="langues"] .mp-chips { display: none; }  /* the reason line already names each language */
}
.mp-spin, .tp-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--color-majorelle-soft-2); border-top-color: var(--color-majorelle);
                     border-radius: 999px; animation: tp-spin .8s linear infinite; }
.mp-ring-wait .cv-spin { display: block; width: 22px; height: 22px; border: 2px solid var(--color-majorelle-soft-2); border-top-color: var(--color-majorelle);
                         border-radius: 999px; animation: tp-spin .8s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mp-spin, .tp-spin, .mp-ring-wait .cv-spin { animation: none; } }

/* ---- the badge on job cards ---------------------------------------------------------------------------------------- */
.oc-tag.oc-match { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums;
                   background: var(--color-majorelle-soft); color: var(--color-majorelle-dark); }
.oc-tag.oc-match .ic { width: 13px; height: 13px; }
.oc-tag.oc-match-high { background: var(--color-green-soft); color: var(--color-green-ink); }
.oc-tag.oc-match-mid { background: var(--color-saffron-soft); color: var(--color-saffron-ink); }
.oc-tag.oc-match-low { background: var(--color-chip); color: var(--color-muted); font-weight: 600; }
.oc-note.oc-fit .ic { color: var(--color-majorelle); }

/* ---- home: the steps after the CV reading ---------------------------------------------------------------------- */
.cv-profile > .cv-next { order: 3; }
.cv-next { display: grid; gap: 6px; margin-top: 10px; }
.cv-next-main { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--club-radius-control, 12px);
                border: 1px solid var(--color-majorelle-line); background: var(--color-majorelle-soft); color: var(--color-ink); }
.cv-next-main:hover { border-color: var(--color-majorelle); }
.cv-next-main > span { display: grid; flex: 1; min-width: 0; }
.cv-next-main b { font-size: 13px; font-weight: 650; color: var(--color-majorelle-dark); }
.cv-next-main small { font-size: 11.5px; color: var(--color-muted); line-height: 1.35; }
.cv-next-main .ic { width: 17px; height: 17px; flex: none; color: var(--color-majorelle); }
.cv-next-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 2px; font-size: 12.5px; font-weight: 600;
                color: var(--color-majorelle-dark); text-decoration: underline; text-underline-offset: 3px; }
.cv-next-link .ic { width: 14px; height: 14px; }
@media (width < 40rem) {  /* phones: one compact line each, so « Trouver des offres » stays above the tab bar at 390 × 900 */
  .cv-next { gap: 2px; margin-top: 8px; }
  .cv-next-main { padding: 7px 10px; }
  .cv-next-main small { display: none; }
}

/* ---- Profil Talent ---------------------------------------------------------------------------------------------- */
.tp { margin-top: 20px; }
.tp-notice { margin-bottom: 14px; }
.tp-notice form.inline { display: inline; }
.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: var(--club-radius-control, 12px);
          border: 1px solid var(--color-line-strong); background: var(--color-card); color: var(--color-ink); font-size: 14px; font-weight: 600;
          white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.tp-btn:hover { background: var(--color-hover); border-color: var(--color-ink-2); }
.tp-btn .ic { width: 16px; height: 16px; }
.tp-btn-sm { min-height: 40px; padding: 0 12px; font-size: 13px; }
.tp-btn-accent { border-color: var(--color-majorelle); background: var(--color-majorelle); color: var(--color-on-accent); }
.tp-btn-accent:hover { background: var(--color-majorelle-dark); border-color: var(--color-majorelle-dark); }
.tp-btn-ink { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-on-ink); }
.tp-btn-ink:hover { background: var(--color-ink-hover); border-color: var(--color-ink-hover); }
.tp-btn-soft { border-color: var(--color-majorelle-line); background: var(--color-majorelle-soft); color: var(--color-majorelle-dark); }
.tp-btn-soft:hover { background: var(--color-majorelle-soft-2); border-color: var(--color-majorelle); }
.tp-btn-block { width: 100%; }
.tp-btn[aria-busy="true"], form[aria-busy="true"] .tp-btn { opacity: .65; pointer-events: none; }
.tp-file { position: relative; }
.tp-file:focus-within { outline: 2px solid var(--color-majorelle); outline-offset: 2px; }
.tp-link { margin-top: 12px; font-size: 14px; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.tp-small { font-size: 12.5px; color: var(--color-muted); line-height: 1.5; }
.tp-small a { text-decoration: underline; text-underline-offset: 2px; }
.tp-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-majorelle); }
.tp-eyebrow .ic { width: 14px; height: 14px; }

.tp-start { max-width: 620px; margin: 24px auto 0; padding: 32px 24px; text-align: center; border: 1px solid var(--color-line); border-radius: var(--club-radius-panel, 24px);
            background: linear-gradient(180deg, var(--color-majorelle-soft) 0%, var(--color-card) 70%); }
.tp-start-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--color-card); color: var(--color-majorelle); border: 1px solid var(--color-majorelle-line); }
.tp-start-ic .ic { width: 24px; height: 24px; }
.tp-start h1 { margin-top: 14px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.tp-start p { margin-top: 8px; color: var(--color-ink-2); }
.tp-start form { margin-top: 18px; }
.tp-start form + form { margin-top: 4px; }
.tp-start-wait { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-majorelle-dark) !important; }

.tp-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; margin-bottom: 16px;
           border: 1px solid var(--color-majorelle-line); border-radius: var(--club-radius-panel, 24px);
           background: var(--color-majorelle-soft); }  /* plain fill: the charter allows no colour gradient */
.tp-hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 360px; }
.tp-avatar { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--color-majorelle); color: var(--color-on-accent);
             font-size: 26px; font-weight: 750; }
.tp-title { margin-top: 2px; font-size: 26px; line-height: 1.2; font-weight: 750; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tp-facts { margin-top: 4px; font-size: 15px; color: var(--color-ink-2); }
/* « Comptable · fiscalité et paie », « 6 ans d’expérience · Casablanca · Bac+3 »: each part brings its « · »; the row is
   pulled back by one dot so the dot of a part that starts a line falls outside the clipped box. No dot ends or starts
   a line, at any width. */
.tp-title, .tp-facts { overflow: hidden; }
.tp-seq { display: flex; flex-wrap: wrap; margin-inline-start: -.9em; }
.tp-seq > span { min-width: 0; }
.tp-seq > span::before { content: "·"; display: inline-block; width: .9em; text-align: center; }
.tp-facts .tp-seq > span { white-space: nowrap; }
.tp-source { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--color-muted); }
.tp-source .ic { width: 14px; height: 14px; flex: none; }
.tp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.tp-layout { display: grid; gap: 16px; }
.tp-aside, .tp-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (width >= 64rem) {
  .tp-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .tp-aside { grid-column: 2; grid-row: 1; position: sticky; top: 90px; }
  .tp-main { grid-column: 1; grid-row: 1; }
}
.tp-card { padding: 20px; border: 1px solid var(--color-line); border-radius: var(--club-radius-card, 18px); background: var(--color-card); scroll-margin-top: 90px; }
.tp-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.tp-card-head h2 { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tp-card-head h2 > .ic { width: 18px; height: 18px; color: var(--color-majorelle); }
.tp-card-head h2:focus { outline: none; }
.tp-count { padding: 1px 8px; border-radius: 999px; background: var(--color-chip); font-size: 12px; font-weight: 700; color: var(--color-muted); }
.tp-edit { display: block; margin-left: auto; }
.tp-edit[open] { flex-basis: 100%; display: grid; justify-items: end; }
.tp-edit[open] > .tp-form { justify-self: stretch; }
.tp-edit > summary { list-style: none; }
.tp-edit > summary::-webkit-details-marker { display: none; }
.tp-edit[open] > summary { background: var(--color-chip); }
.tp-form { flex-basis: 100%; margin-top: 8px; padding: 16px; border-radius: var(--club-radius-control, 12px); background: var(--color-fill); border: 1px solid var(--color-line); }
.tp-fields { display: grid; gap: 12px; }
@media (width >= 40rem) { .tp-fields { grid-template-columns: 1fr 1fr; } .tp-span2 { grid-column: 1 / -1; } }
.tp-field { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--color-ink-2); }
.tp-field small, .tp-contracts small { font-weight: 400; color: var(--color-muted); }
.tp-field .field, .tp-inline-add .field { width: 100%; min-height: 42px; font-weight: 400; }
.tp-field textarea.field { min-height: 96px; padding-top: 10px; line-height: 1.5; resize: vertical; }
.tp-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--color-ink); }
.tp-check input { width: 18px; height: 18px; accent-color: var(--color-majorelle); }
.tp-contracts { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; padding: 0; margin: 0; }
.tp-contracts legend { width: 100%; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--color-ink-2); }
.tp-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tp-summary { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--color-ink); white-space: pre-line; }
.tp-empty { margin-top: 10px; padding: 14px; border: 1px dashed var(--color-line-strong); border-radius: var(--club-radius-control, 12px); font-size: 14px; color: var(--color-muted); }

.tp-item { position: relative; padding: 14px 88px 14px 0; border-top: 1px solid var(--color-line-2); }
.tp-card-head + .tp-item { margin-top: 10px; }
.tp-item h3 { font-size: 15.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.tp-item-sub { margin-top: 2px; font-size: 14px; color: var(--color-ink-2); }
.tp-item-date { margin-top: 2px; font-size: 13px; color: var(--color-muted); }
.tp-tag { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--color-chip); font-size: 11.5px; font-weight: 600; color: var(--color-ink-2); vertical-align: 2px; }
.tp-bullets { display: grid; gap: 4px; margin-top: 8px; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 1.5; color: var(--color-ink-2); }
.tp-bullets li::marker { color: var(--color-majorelle-line); }
.tp-del, .tp-item-edit > summary { position: absolute; top: 10px; }
.tp-del { right: 0; }
.tp-item-edit > summary { right: 44px; list-style: none; }
.tp-item-edit > summary::-webkit-details-marker { display: none; }
.tp-del button, .tp-item-edit > summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--color-muted); cursor: pointer; }
.tp-del button:hover { background: var(--color-red-soft); color: var(--color-red); }
.tp-item-edit > summary:hover, .tp-item-edit[open] > summary { background: var(--color-chip); color: var(--color-ink); }
.tp-del .ic, .tp-item-edit .ic { width: 16px; height: 16px; }
.tp-item-edit[open] { margin-right: -88px; }

.tp-skills { display: grid; gap: 8px; margin-top: 12px; }
@media (width >= 40rem) { .tp-skills { grid-template-columns: 1fr 1fr; } }
.tp-skills li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 4px 4px 12px; border: 1px solid var(--color-line); border-radius: var(--club-radius-control, 12px); background: var(--color-card); }
.tp-skill-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.tp-level { height: 40px; max-width: 150px; padding: 0 26px 0 10px; border-radius: 8px; border: 1px solid transparent; background-color: var(--color-chip); font-size: 12.5px; font-weight: 600; color: var(--color-ink-2); cursor: pointer; }
.tp-level.is-empty { border-style: dashed; border-color: var(--color-line-strong); background-color: transparent; color: var(--color-muted); }
.tp-x button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--color-faint); }
.tp-x button:hover { background: var(--color-red-soft); color: var(--color-red); }
.tp-x .ic { width: 15px; height: 15px; }
.tp-inline-add { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
@media (width >= 40rem) { .tp-inline-add { grid-template-columns: 1fr 150px auto; } }

.tp-suggest { margin-top: 18px; padding: 16px; border-radius: var(--club-radius-control, 12px); background: var(--color-majorelle-soft); border: 1px solid var(--color-majorelle-line); scroll-margin-top: 90px; }
.tp-suggest h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--color-ink); }
.tp-suggest h3 .ic { width: 17px; height: 17px; color: var(--color-majorelle); }
.tp-suggest .tp-small { margin-top: 4px; }
.tp-suggest ul { display: grid; gap: 6px; margin-top: 12px; }
/* the « Ajouter » buttons line up at the right edge, whatever the length of « Demandé dans … offres » */
.tp-suggest li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--color-card); }
.tp-suggest li form { justify-self: end; }
.tp-suggest-name { grid-column: 1 / -1; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
@media (width >= 40rem) { .tp-suggest li { grid-template-columns: minmax(0, 1fr) auto auto; } .tp-suggest-name { grid-column: auto; } }
.tp-suggest-n { font-size: 12.5px; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.tp-wishes { display: grid; gap: 10px; margin-top: 12px; }
.tp-wishes > div { display: grid; gap: 4px; }
@media (width >= 40rem) { .tp-wishes > div { grid-template-columns: 160px 1fr; align-items: baseline; } }
.tp-wishes dt { font-size: 13px; color: var(--color-muted); }
.tp-wishes dd { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14.5px; font-weight: 600; }
.tp-chip { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--color-chip); font-size: 13px; font-weight: 600; }
.tp-none { font-weight: 400; color: var(--color-faint); }

.tp-meter-top { display: flex; align-items: center; gap: 14px; }
.tp-meter h2 { font-size: 16px; font-weight: 700; }
.tp-meter p { margin-top: 2px; font-size: 13px; color: var(--color-muted); line-height: 1.45; }
.tp-ring { position: relative; flex: none; display: grid; place-items: center; align-content: center; width: 68px; height: 68px; border-radius: 999px;
           background: conic-gradient(var(--color-majorelle) calc(var(--p, 0) * 1%), var(--color-line) 0); }
.tp-ring.is-full { background: var(--color-green); }
.tp-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 999px; background: var(--color-card); }
.tp-ring > * { position: relative; }
.tp-ring b { font-size: 21px; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.tp-ring small { font-size: 10px; color: var(--color-muted); }
.tp-missing { display: grid; gap: 6px; margin-top: 14px; }
.tp-missing a, .tp-missing button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 10px;
                                     border: 1px solid var(--color-line); background: var(--color-card); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; color: var(--color-ink); }
.tp-missing a:hover, .tp-missing button:hover { border-color: var(--color-majorelle); background: var(--color-majorelle-soft); }
.tp-missing .ic { width: 15px; height: 15px; color: var(--color-majorelle); flex: none; }
.tp-missing span { flex: 1; }
.tp-missing b { font-size: 12px; font-weight: 700; color: var(--color-green); font-variant-numeric: tabular-nums; }
.tp-complete { display: flex; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--color-green-ink); }
.tp-cta h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.tp-cta h2 .ic { width: 18px; height: 18px; color: var(--color-majorelle); }
.tp-cta p { margin: 6px 0 14px; font-size: 13.5px; color: var(--color-ink-2); }
@media (width < 40rem) {
  .tp-hero { padding: 18px 16px; }
  .tp-avatar { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; }
  .tp-title { font-size: 21px; }
  .tp-hero-actions { width: 100%; }
  .tp-hero-actions > * { flex: 1 1 100%; }
  .tp-hero-actions .tp-btn { width: 100%; }
  .tp-card { padding: 16px; }
  .tp-card-head .tp-btn-sm { min-height: 40px; }
  .tp-level { max-width: 118px; }
  .tp-level.tp-level-lang { max-width: none; }  /* « Langue maternelle », « Intermédiaire » in full */
}
[data-tp-root][aria-busy="true"] { cursor: progress; }

/* ---- « Mes offres pour moi » ------------------------------------------------------------------------------------ */
.pm { margin-top: 20px; }
.pm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.pm-title { margin-top: 4px; font-size: 28px; font-weight: 750; letter-spacing: -.025em; }
.pm-lead { max-width: 720px; margin-top: 6px; font-size: 15px; color: var(--color-ink-2); }
.pm-profile { display: grid; gap: 8px; justify-items: start; }
.pm-roles { font-size: 13.5px; color: var(--color-muted); }
.pm-roles b { color: var(--color-ink); font-weight: 650; }
.pm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 18px 0 16px; padding: 12px; border: 1px solid var(--color-line); border-radius: var(--club-radius-control, 12px); background: var(--color-card); }
.pm-filters label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-muted); flex: 1 1 160px; }
.pm-filters select { height: 40px; padding: 0 10px; border: 1px solid var(--color-line-strong); border-radius: 10px; background: var(--color-card); color: var(--color-ink); font-size: 14px; }
.pm-reset { align-self: center; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--color-muted); }
.pm-start { max-width: 620px; }
@media (width < 40rem) { .pm-title { font-size: 23px; } }

/* ---- « Quel poste visez-vous ? »: a CV that names no post (_cv_role_form.html) ----------------------------------- */
.cv-role { display: grid; gap: 6px; margin-top: 10px; text-align: left; }
.cv-role-label { font-size: 14px; font-weight: 650; color: var(--color-ink); }
.cv-role-hint { margin: 0 !important; font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.cv-role-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-role-row .field { flex: 1 1 200px; width: auto; min-height: 44px; font-size: 16px; }  /* 16 px: no zoom on iPhone */
.cv-role-go { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: var(--club-radius-control, 12px); background: var(--color-majorelle);
  color: var(--color-on-accent, #fff); font-size: 14px; font-weight: 650; cursor: pointer; }
.cv-role-go:hover { background: var(--color-majorelle-dark); }
.cv-role-go:disabled { opacity: .6; cursor: progress; }
.esp-empty .cv-role { max-width: 440px; margin: 14px auto 0; }
.mp-foot .cv-role { margin-top: 0; width: 100%; }
@media (width < 30rem) { .cv-role-row .cv-role-go { flex: 1 1 100%; } }