/* Juste — « Ce que demande l'offre » : exigences de l'offre comparées au CV,
   points communs, compétences à acquérir et CV d'origine surligné. Chargé après panel-v4.css. */

:root {
  --m-ok: var(--v4-teal, #2f6b5c);
  --m-ok-bg: #e6f1ed;
  --m-ok-mark: rgba(47, 107, 92, .17);
  --m-part: #7fb3a3;
  --m-part-bg: #f1f7f4;
  --m-part-mark: rgba(47, 107, 92, .08);
  --m-gap: #b7791f;
  --m-gap-ink: #7c4f0e;
  --m-gap-bg: #fbf1dc;
  --m-gap-line: #efd39c;
}
:root[data-theme="dark"] {
  --m-ok-bg: #1f332c; --m-ok-mark: rgba(124, 196, 173, .22);
  --m-part: #4f8a78; --m-part-bg: #1a2723; --m-part-mark: rgba(124, 196, 173, .1);
  --m-gap: #e3ad4c; --m-gap-ink: #f0c87e; --m-gap-bg: #33291a; --m-gap-line: #5a4626;
}

.match {
  margin: 14px 0 6px; padding: 16px; background: var(--v4-card); border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius, 12px); box-shadow: var(--v4-shadow);
  animation: match-in .5s cubic-bezier(.2, .8, .2, 1) both .15s;
}
.match[hidden] { display: none; }
.match-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.match-head h2 { font-size: 16px; line-height: 1.25; margin: 2px 0 0; color: var(--v4-ink); }
.match-count { flex: none; font-size: 13px; color: var(--v4-ink-2); white-space: nowrap; }
.match-count b { font-size: 22px; font-weight: 700; color: var(--m-ok); letter-spacing: -.02em; margin-right: 2px; }

.match-bar { display: flex; gap: 3px; height: 8px; margin: 12px 0 8px; border-radius: 999px; overflow: hidden; background: var(--v4-tint-2); }
.match-bar i { flex: 0 1 0; min-width: 6px; transition: flex-grow .9s cubic-bezier(.2, .8, .2, 1); }
.match-bar i[hidden] { display: none; }
.match-bar .seg-ok { background: var(--m-ok); }
.match-bar .seg-part { background: var(--m-part); }
.match-bar .seg-gap { background: var(--m-gap); }
.match-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--v4-ink-2); }
.match-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--m-ok); } .dot.part { background: var(--m-part); } .dot.gap { background: var(--m-gap); }

.match-method { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--v4-ink-2); }
.match-method[hidden] { display: none; }
.match-group { margin-top: 16px; }
.match-group[hidden] { display: none; }
.match-group h3 { font-size: 12.5px !important; font-weight: 650; color: var(--v4-ink); margin: 0 0 8px; }
.match-help { font-size: 12px; line-height: 1.45; color: var(--v4-ink-2); margin: -4px 0 8px; }
.match-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.mchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 11px 5px 7px;
  font: 500 12.5px/1.2 var(--v4-sans); border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; text-align: left;
}
.mchip:hover { transform: translateY(-1px); box-shadow: var(--v4-shadow-hover); }
.mchip:focus-visible { outline: 2px solid var(--m-ok); outline-offset: 2px; }
.mchip-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; flex: none; }
.mchip small { font-size: 10px; font-weight: 650; letter-spacing: .02em; padding: 2px 6px; border-radius: 999px; margin-left: 2px; }
.mchip-ok { background: var(--m-ok-bg); color: var(--m-ok); border-color: color-mix(in srgb, var(--m-ok) 22%, transparent); }
.mchip-ok .mchip-ico { background: var(--m-ok); color: #fff; }
.mchip-ok small { background: color-mix(in srgb, var(--m-ok) 12%, transparent); }
.mchip-part { background: var(--m-part-bg); color: var(--m-ok); border: 1px dashed var(--m-part); }
.mchip-part .mchip-ico { background: linear-gradient(90deg, var(--m-ok) 50%, transparent 50%); border: 1.5px solid var(--m-ok); width: 14px; height: 14px; margin: 0 3px; }
.mchip-part small { background: color-mix(in srgb, var(--m-ok) 10%, transparent); }
.mchip-gap { background: var(--m-gap-bg); color: var(--m-gap-ink); border-color: var(--m-gap-line); }
.mchip-gap .mchip-ico { background: var(--v4-card); color: var(--m-gap); border: 1.5px solid var(--m-gap-line); }
.mchip-gap small { background: color-mix(in srgb, var(--m-gap) 16%, transparent); }
.mchip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--v4-card), 0 0 0 4px currentColor; }
:root[data-theme="dark"] .mchip-ok .mchip-ico { color: #0f1a16; }

.match-detail {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--v4-tint-2);
  border: 1px solid var(--v4-border); border-left: 3px solid var(--m-ok);
}
.match-detail[hidden] { display: none; }
.match-detail.tone-part { border-left-color: var(--m-part); }
.match-detail.tone-gap { border-left-color: var(--m-gap); background: color-mix(in srgb, var(--m-gap-bg) 55%, var(--v4-card)); }
.match-detail.pop { animation: match-pop .28s cubic-bezier(.2, .8, .2, 1); }
.md-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-head strong { font-size: 14px; color: var(--v4-ink); }
.md-level { font-size: 10.5px; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--v4-card); border: 1px solid var(--v4-border); color: var(--v4-ink-2); white-space: nowrap; }
.md-level.md-obligatoire { color: var(--m-gap-ink); border-color: var(--m-gap-line); background: var(--m-gap-bg); }
.md-status { font-size: 12px; color: var(--v4-ink-2); margin: 2px 0 10px; }
.md-quote { margin-top: 8px; }
.md-quote span { display: block; font-size: 10px; font-weight: 650; letter-spacing: .06em; color: var(--v4-ink-2); margin-bottom: 3px; }
.md-quote p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--v4-ink); padding: 6px 9px; border-radius: 7px; }
.md-offer p { background: var(--m-gap-bg); box-shadow: inset 2px 0 0 var(--m-gap); }
.md-cv p { background: var(--m-ok-mark); box-shadow: inset 2px 0 0 var(--m-ok); }
.md-tip { font-size: 12px; line-height: 1.5; color: var(--v4-ink-2); margin: 10px 0 0; }
.md-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.md-actions:empty { display: none; }
.md-actions .link-btn { font-size: 12.5px; font-weight: 600; color: var(--m-ok); padding: 0; }

.match-cv { margin-top: 14px; border-top: 1px solid var(--v4-border); padding-top: 4px; }
.match-cv[hidden] { display: none; }
.match-cv summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0 5px; font-size: 13px; font-weight: 600; color: var(--m-ok);
}
.match-cv summary::-webkit-details-marker { display: none; }
.match-cv summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; margin-left: 4px; }
.match-cv[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.match-cv summary span { flex: 1; }
.match-cv summary small { font-size: 11.5px; font-weight: 500; color: var(--v4-ink-2); }
.match-cv-legend { font-size: 11.5px; color: var(--v4-ink-2); margin: 4px 0 8px; }
.match-cv-text {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.75; color: var(--v4-ink);
  background: var(--v4-tint-2); border: 1px solid var(--v4-border); border-radius: 10px; padding: 12px 13px;
  max-height: 380px; overflow: auto; overscroll-behavior: contain;
}
mark.hl { color: inherit; border-radius: 3px; padding: 1px 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.hl-ok { background: var(--m-ok-mark); box-shadow: inset 0 -2px 0 var(--m-ok); }
mark.hl-part { background: var(--m-part-mark); box-shadow: inset 0 -1.5px 0 var(--m-part); }
.match-cv-legend mark.hl { padding: 0 3px; }
mark.hl.flash { animation: match-flash 1.4s ease-out; }

@keyframes match-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes match-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes match-flash { 0%, 30% { background: color-mix(in srgb, var(--m-ok) 45%, transparent); } 100% { background: var(--m-ok-mark); } }
@media (prefers-reduced-motion: reduce) {
  .match, .match-detail.pop, mark.hl.flash { animation: none; }
  .match-bar i, .mchip { transition: none; }
}

/* CV adapté en préparation (analyse en deux temps) */
.cv-wait { display: grid; gap: 6px; padding: 18px 16px; border-radius: 10px; background: var(--v4-tint-2); border: 1px dashed var(--v4-border-strong); }
.cv-wait strong { font-size: 14px; color: var(--v4-ink); display: flex; align-items: center; gap: 8px; }
.cv-wait span { font-size: 12.5px; color: var(--v4-ink-2); line-height: 1.5; }
.cv-wait .cv-wait-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--m-ok); animation: cv-pulse 1.1s ease-in-out infinite; }
.cv-wait i { display: block; height: 10px; border-radius: 6px; margin-top: 6px;
  background: linear-gradient(90deg, var(--v4-border) 0%, var(--v4-card) 50%, var(--v4-border) 100%); background-size: 200% 100%; animation: cv-shimmer 1.4s linear infinite; }
.cv-wait i:nth-of-type(2) { width: 82%; } .cv-wait i:nth-of-type(3) { width: 64%; }
.cv-wait.failed { border-style: solid; border-color: var(--m-gap-line); background: var(--m-gap-bg); }
.cv-wait.failed strong { color: var(--m-gap-ink); }
.cv-pending .design-picker, .cv-pending .cv-actions { opacity: .55; }
@keyframes cv-pulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes cv-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cv-wait .cv-wait-dot, .cv-wait i { animation: none; } }