/* ═══════════════════════════════════════════════════════════════════════════
   HOPPI — Feuille de CV d'exemple `.h-cv-sheet` (composant `.h-cv`, DESIGN_SYSTEM §7.27)
   Séparée de h-cv.css pour rester sous 200 lignes. Tokens uniquement ; le CV est du
   vrai HTML (crawlable), pas une image.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────── Feuille de CV ─────────── */
.h-cv-figure { margin: 0; }
.h-cv-sheet {
  padding: 26px 28px 22px;
  border-radius: 18px;
  background: var(--h-white);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--h-charcoal) 18%, transparent);
  transform: rotate(1.4deg);
  font-size: 12px;
  line-height: 1.45;
  color: var(--h-ink-soft);
}
.h-cv-sheet p { margin: 0; max-width: none; }
.h-cv-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--h-rule-soft);
}
.h-cv-name {
  font-family: var(--h-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--h-charcoal);
}
.h-cv-spe { margin-top: 5px !important; font-weight: 600; color: var(--h-ink-soft); }
.h-cv-contact { margin-top: 8px !important; font-size: 11px; color: var(--h-ink-soft); }
.h-cv-rpps {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--h-latte);
  font-size: 10px;
  font-weight: 600;
  color: var(--h-charcoal);
}
.h-cv-made { flex: none; text-align: right; }
.h-cv-made-label {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--h-ink-soft);
}
.h-cv-made-pill {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--h-rule);
  border-radius: 100px;
  font-family: var(--h-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--h-charcoal);
}
.h-cv-made-pill i { font-style: normal; color: var(--h-ink-soft); }
.h-cv-accroche { margin-top: 12px !important; color: var(--h-charcoal); }
.h-cv-h {
  margin: 14px 0 6px;
  font-family: var(--h-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-ink-soft);
}
.h-cv-projet { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.h-cv-projet div { padding: 6px 9px; border-radius: 8px; background: var(--h-latte); }
.h-cv-projet dt { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--h-ink-soft); }
.h-cv-projet dd { margin: 1px 0 0; font-weight: 600; color: var(--h-charcoal); }
.h-cv-xp, .h-cv-form, .h-cv-chips { margin: 0; padding: 0; list-style: none; }
.h-cv-xp li { margin-bottom: 7px; }
.h-cv-xp-t strong, .h-cv-form strong { color: var(--h-charcoal); }
.h-cv-xp-t span { float: right; font-size: 10.5px; color: var(--h-ink-soft); }
.h-cv-xp-d { margin-top: 1px !important; }
.h-cv-form li { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.h-cv-form span { color: var(--h-ink-soft); text-align: right; }
.h-cv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.h-cv-chips li {
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--h-air-50);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--h-charcoal);
}
.h-cv-cap { margin-top: 14px; text-align: center; font-size: 12.5px; opacity: 0.7; }

@media (max-width: 900px) {
  .h-cv-sheet { transform: none; padding: 22px 20px 18px; }
}
@media (max-width: 600px) {
  .h-cv-projet { grid-template-columns: 1fr; }
}