/* ═══════════════════════════════════════════════════════════════════════════
   Spotlite — Exemples de CV (/exemples-cv), pages rendues par la fonction
   `cvExamples` (functions/seo_management/cv_examples.js).

   Même ADN que l'app web : fond noir, typo système, bleu à plat pour les
   actions, blanc pour le primaire. Les CV sont des feuilles BLANCHES : on
   reconnaît un CV au premier coup d'œil. Aucun JavaScript : filtres = liens.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --accent: #1d9bf0; --accent-2: #1a8cd8; --ai: #f4b78a;
  --bg: #050506; --ink: #fff; --ink-2: rgba(255,255,255,.66); --ink-3: rgba(255,255,255,.44);
  --surface: rgba(255,255,255,.06); --surface-hi: rgba(255,255,255,.11); --line: rgba(255,255,255,.1);
  --paper: #fff; --paper-ink: #16161a; --paper-2: #5b5b66; --paper-line: #ececf0;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2 { letter-spacing: -.02em; }

/* ── Barre du haut ───────────────────────────────────────────────────────── */
.x-top { position: sticky; top: 0; z-index: 10; background: rgba(5,5,6,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); }
.x-top-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px var(--gutter); }
.x-brand { display: flex; align-items: center; gap: 9px; font-weight: 850; font-size: 18px; letter-spacing: -.03em; }
.x-brand img { width: 26px; height: 26px; }
.x-nav { display: flex; gap: 4px; margin-right: auto; }
.x-nav a { padding: 7px 11px; border-radius: 10px; color: var(--ink-2); font-weight: 650; font-size: 14.5px; }
.x-nav a:hover { color: #fff; background: var(--surface); }
.x-nav a.on { color: #fff; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: #fff; font: inherit; font-weight: 700;
  font-size: 15px; cursor: pointer; transition: background-color .15s, border-color .15s; white-space: nowrap; }
.x-btn:hover { border-color: rgba(255,255,255,.25); background: var(--surface-hi); }
.x-btn.primary { background: #fff; color: #0b0b0d; border-color: #fff; }
.x-btn.primary:hover { background: #ecebe9; }
.x-btn.sm { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 10px; }
.x-btn.block { display: flex; width: 100%; }

/* ── Page ────────────────────────────────────────────────────────────────── */
.x-wrap { max-width: 1180px; margin: 0 auto; padding: 18px var(--gutter) 60px; }
.x-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.x-crumbs a:hover { color: #fff; }
.x-crumbs [aria-current] { color: var(--ink-2); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-hero h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.05; margin: 0 0 10px; font-weight: 850; letter-spacing: -.035em; }
.x-lead { color: var(--ink-2); font-size: 16.5px; max-width: 680px; margin: 0 0 18px; }
.x-lead b { color: #fff; }
.x-search { display: flex; gap: 8px; max-width: 640px; margin-bottom: 18px; }
.x-search input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: #fff; font: inherit; font-size: 16px; outline: none; }
.x-search input:focus { border-color: rgba(255,255,255,.35); background: var(--surface-hi); }
.x-search input::placeholder { color: var(--ink-3); }

/* ── Filtres : pastilles (liens) ─────────────────────────────────────────── */
.x-filters { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.x-fgroup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.x-flabel { flex: 0 0 132px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.x-chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 650; white-space: nowrap; transition: border-color .15s, color .15s; }
.x-chip:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.x-chip em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.x-chip.on { background: #fff; color: #0b0b0d; border-color: #fff; }
.x-chip.on i { font-style: normal; opacity: .55; }
.x-reset { align-self: flex-start; font-size: 13.5px; color: var(--accent); font-weight: 650; }
.x-count { color: var(--ink-3); font-size: 13.5px; margin: 12px 0 10px; min-height: 1px; }

/* ── Grille d'exemples : la vignette EST le document ─────────────────────── */
.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.x-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #111114; border: 1px solid var(--line);
  transition: transform .18s, border-color .18s; }
.x-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.x-thumb { position: relative; aspect-ratio: 210 / 250; overflow: hidden; background: #fff; pointer-events: none; }
.x-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.x-card-info { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-card-info b { font-size: 15px; line-height: 1.3; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-card-info small { color: var(--ink-3); font-size: 12.5px; }
.x-card-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px 12px; font-size: 13px; color: var(--ink-3); }
.x-card-foot .x-go { color: #fff; font-weight: 700; }
.x-ai { color: var(--ai); font-weight: 700; }
.x-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 18px; border: 1.5px dashed var(--line);
  border-radius: 18px; color: var(--ink-2); }
.x-empty b { color: #fff; font-size: 18px; }
.x-empty .x-btn { margin-top: 8px; }
.x-empty.big { margin: 40px auto; max-width: 560px; }
.x-pages { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 24px 0 0; color: var(--ink-3); font-size: 14px; }

/* ── Le document A4 : réplique du PDF de l'atelier (lite/cv_pdf.js) ─────────
   Base = 9,5 pt sur une page de 794 px de large, tirée de la largeur du
   conteneur (cqw) : même page en vignette et en grand, texte toujours net.
   Les mesures en pt du PDF sont converties en em de cette base. */
.x-thumb, .x-docwrap { container-type: inline-size; }
.x-doc { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; color: #222; background: #fff; text-align: left;
  font-size: calc(100cqw / 62.68); line-height: 1.25; -webkit-font-smoothing: antialiased; }
.x-doc .d-page { padding: 4.21em 4.42em; min-height: calc(100cqw * 1.4142); }
.x-doc .d-head > div { overflow-wrap: anywhere; }
.x-doc .d-name { font-size: 2.105em; font-weight: 700; line-height: 1.2; margin-bottom: .1em; color: #1a1a1a; }
.x-doc .d-role { font-size: 1.105em; color: #555; margin-bottom: .38em; }
.x-doc .d-contact, .x-doc .d-link { font-size: .895em; color: #777; white-space: pre-wrap; }
.x-doc .d-link { margin-top: .35em; }
.x-doc .d-link b { color: #333; }
.x-doc .d-link u { color: #1a5fb4; }
.x-doc .d-blur { filter: blur(.3em); opacity: .8; user-select: none; }
.x-doc .d-rule { height: .074em; background: #1a1a1a; margin: .84em 0 1.05em; }
.x-doc .d-sec h3 { font-size: 1em; font-weight: 700; color: #1a1a1a; letter-spacing: .063em; margin: 1.26em 0 .42em; }
.x-doc .d-page > .d-sec:first-of-type h3, .x-doc .d-main > .d-sec:first-child h3, .x-doc .d-side > .d-sec:first-child h3 { margin-top: 0; }
.x-doc .d-para { margin: 0; white-space: pre-wrap; }
.x-doc .d-item { margin-bottom: .63em; }
.x-doc .d-it { font-size: 1.053em; font-weight: 700; }
.x-doc .d-meta { font-size: .895em; color: #888; margin: .1em 0 .2em; }
.x-doc .d-meta:empty { display: none; }
.x-doc ul { margin: .2em 0 0; padding-left: 1.25em; line-height: 1.2; }
.x-doc li { margin: .12em 0; }
/* Mises en page */
.x-doc.s-classic .d-head { text-align: center; }
.x-doc.s-modern .d-rule { height: .21em; margin: .63em 0 1.26em; }
.x-doc.s-twoColumns .d-rule { margin: .84em 0 1.26em; }
.x-doc.s-minimalist .d-rule, .x-doc.s-compact .d-rule { display: none; }
.x-doc.s-minimalist .d-head { margin-bottom: .4em; }
.x-doc.s-compact .d-page { padding: 3.37em 3.79em; }
.x-doc.s-compact .d-page > * { font-size: .86em; }
.x-doc.s-compact .d-sec h3 { margin-top: .84em; }
.x-doc .d-cols { display: grid; grid-template-columns: 63fr 37fr; column-gap: 2.32em; }
.x-doc .d-cols > div { min-width: 0; }

/* ── Appel à l'action, FAQ ───────────────────────────────────────────────── */
.x-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 40px 0 0; padding: 24px;
  border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(29,155,240,.10), rgba(29,155,240,.03)); }
.x-cta h2 { margin: 0 0 6px; font-size: 24px; }
.x-cta p { margin: 0; color: var(--ink-2); max-width: 560px; }
.x-cta-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.x-perks { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 14px; }
.x-perks li::before { content: "✓"; color: var(--accent); font-weight: 800; margin-right: 6px; }
.x-faq { margin-top: 40px; max-width: 820px; }
.x-faq h2 { font-size: 22px; }
.x-faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.x-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 20px; line-height: 1; }
.x-faq details[open] summary::after { content: "–"; }
.x-faq details p { margin: 8px 0 0; color: var(--ink-2); }

/* ── Fiche d'un exemple : le document en grand + l'éditeur ─────────────────── */
.x-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.x-detail-main { min-width: 0; }
.x-docbar h1 { margin: 6px 0 2px; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; }
.x-docbar p { margin: 0 0 14px; color: var(--ink-2); }
.x-cv-anon { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; }
.x-edbar { position: sticky; top: 57px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; background: rgba(5,5,6,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.x-styles { display: flex; gap: 6px; flex-wrap: wrap; }
.x-styles button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.x-styles button:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.x-styles button.on { background: #fff; color: #0b0b0d; border-color: #fff; }
.x-edacts { display: flex; gap: 6px; flex-wrap: wrap; }
.x-edacts .x-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.x-btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.x-btn.accent:hover { background: var(--accent-2); }
.x-edhint { margin: 0 0 12px; color: var(--ink-3); font-size: 13.5px; }
.x-edhint b { color: #fff; }
.x-edhint button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; }
.x-docwrap { max-width: 820px; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
/* Édition : on voit où taper, sans que la page cesse de ressembler à un CV. */
.x-doc.editing [contenteditable="true"] { outline: 1px dashed transparent; outline-offset: .15em; border-radius: .2em; cursor: text;
  transition: outline-color .15s, background-color .15s; }
.x-doc.editing [contenteditable="true"]:hover { outline-color: rgba(29,155,240,.55); }
.x-doc.editing [contenteditable="true"]:focus { outline: 1px solid #1d9bf0; background: rgba(29,155,240,.06); }
.x-doc.editing [data-ph]:empty::before { content: attr(data-ph); color: #b3b3bb; font-weight: 400; }
.x-doc.editing .d-meta:empty { display: block; }
.x-doc.editing .d-meta:empty::before { content: attr(data-ph); color: #b3b3bb; }
.x-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; }
.x-side-card { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.x-side-card p { margin: 6px 0 14px; color: var(--ink-2); font-size: 14.5px; }
.x-side-card .x-alt { margin-top: 8px; }
.x-side-h { display: block; font-size: 16.5px; letter-spacing: -.01em; }
.x-side-card .x-perks { flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13.5px; }
.x-uses { margin: 8px 0 0 !important; font-size: 13px !important; color: var(--ink-3) !important; text-align: center; }
.x-why { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.x-why li { margin: 5px 0; }
.x-anon p { margin-bottom: 0; font-size: 13.5px; }
.x-more { margin-top: 40px; }
.x-more h2 { font-size: 22px; margin: 0 0 14px; }
.x-more > .x-btn { margin-top: 16px; }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.x-foot { border-top: 1px solid var(--line); margin-top: 40px; }
.x-foot-in { max-width: 1180px; margin: 0 auto; padding: 22px var(--gutter) 34px; display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; color: var(--ink-3); font-size: 13.5px; }
.x-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.x-foot a:hover { color: #fff; }

/* ── Téléphone ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .x-detail { grid-template-columns: minmax(0, 1fr); }
  .x-side { position: static; }
}
@media (max-width: 640px) {
  .x-nav { display: none; }
  .x-brand { margin-right: auto; }
  .x-fgroup { flex-direction: column; align-items: stretch; gap: 6px; }
  .x-flabel { flex: none; }
  /* Une ligne qui défile par groupe : la page ne s'allonge pas de dix lignes de pastilles. */
  .x-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .x-chips::-webkit-scrollbar { display: none; }
  .x-search .x-btn { padding: 10px 14px; }
  .x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .x-card-info b { font-size: 13.5px; }
  .x-card-foot .x-go { display: none; }
  .x-edbar { top: 53px; }
  .x-styles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .x-styles::-webkit-scrollbar { display: none; }
  .x-cta { padding: 18px; }
  .x-cta-acts, .x-cta-acts .x-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .x-card { transition: none; } .x-card:hover { transform: none; } }

/* ── Smartlink = bonus du compte (mode édition) ───────────────────────────── */
.x-doc .d-slcta { display: inline-block; padding: .15em .5em; border: 1px dashed #1a5fb4; border-radius: .3em; color: #1a5fb4; cursor: pointer; font-weight: 500; }
.x-doc .d-slcta:hover { background: rgba(26,95,180,.06); }

/* ── Après le téléchargement : le compte, proposé (jamais imposé) ─────────── */
.x-after { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(380px, calc(100vw - 32px)); padding: 20px 20px 18px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: #141416; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s; }
.x-after.on { transform: none; opacity: 1; pointer-events: auto; }
.x-after b { display: block; font-size: 17px; letter-spacing: -.01em; }
.x-after p { margin: 6px 0 8px; color: var(--ink-2); font-size: 14px; }
.x-after ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 14px; }
.x-after li::before { content: "✓"; color: var(--accent); font-weight: 800; margin-right: 8px; }
.x-after-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.x-after-acts .x-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.x-after-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ink-3);
  font-size: 20px; cursor: pointer; }
.x-after-x:hover { color: #fff; background: var(--surface); }
@media (max-width: 640px) { .x-after { right: 16px; left: 16px; bottom: 16px; width: auto; } }
.x-slnote { margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13.5px; }
.x-slnote b { color: #fff; }
.x-slnote a { color: var(--accent); font-weight: 650; }

/* ── Guides (contenu SEO utile) ───────────────────────────────────────────── */
.x-guide { margin-top: 44px; max-width: 980px; }
.x-guide h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 10px; }
.x-guide h3 { font-size: 15px; margin: 0 0 8px; letter-spacing: -.01em; }
.x-guide-intro { color: var(--ink-2); font-size: 16px; max-width: 760px; margin: 0 0 18px; }
.x-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.x-guide-grid > div, .x-guide-cols > div { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.x-guide ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.x-guide li { margin: 5px 0; }
.x-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.x-kw span { padding: 4px 10px; border-radius: 999px; background: rgba(29,155,240,.12); color: #cfe9fd; font-size: 13px; font-weight: 600; }
.x-tip { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; }
.x-tip b { display: block; color: #fff; font-size: 13px; letter-spacing: .02em; margin-bottom: 2px; }
.x-tip.warn b { color: #ffba49; }
.x-jobs { margin: 14px 0 0; color: var(--ink-3); font-size: 13.5px; }
.x-guide-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.x-guide-cols p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.x-mistakes li { margin: 6px 0; }
.x-more-link { margin: 14px 0 0; }
.x-more-link a { color: var(--accent); font-weight: 650; }
.x-empty.soft { border-style: solid; margin-bottom: 16px; padding: 22px 18px; }

/* ── Maillage : tous les métiers ──────────────────────────────────────────── */
.x-hub { margin-top: 44px; }
.x-hub h2 { font-size: 22px; margin: 0 0 14px; }
.x-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.x-hub-a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  transition: border-color .15s, background-color .15s; }
.x-hub-a:hover { border-color: rgba(255,255,255,.25); background: var(--surface); }
.x-hub-a.on { border-color: #fff; }
.x-hub-a b { font-size: 14.5px; }
.x-hub-a small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-hub-a em { font-style: normal; color: var(--accent); font-size: 12px; font-weight: 700; }
@media (max-width: 640px) {
  .x-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .x-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.x-seed { color: #9fd3fb; font-weight: 700; }