/* ═══════════════════════════════════════════
   CV — print view
   Single column on purpose: an ATS reads the PDF as one linear text flow, and
   a side column interleaves skills into the middle of a job description.
   Screen preview mimics the printed A4 page, close to what prints.
═══════════════════════════════════════════ */

:root {
  --cv-ink:    #2a2622;
  --cv-muted:  #5d564f;
  --cv-accent: #7c4a15;
  --cv-rule:   #3f2a10;
  --cv-hair:   #c9c2ba;
  /* Humanist sans, close to the LaTeX original and free of any webfont to load.
     No -apple-system: Chrome writes San Francisco into the PDF in fragments,
     and text extractors read "jusq u'aux" or "Bitbu cket". */
  --cv-sans:   'Helvetica Neue', Helvetica, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #e8e2db;
  color: var(--cv-ink);
  font-family: var(--cv-sans);
  font-size: 9.6pt;
  line-height: 1.34;
  /* Helvetica Neue joins "ffi" into one glyph, which reaches the PDF's text
     as U+FB03: an ATS searching "Offices" would not find it */
  font-variant-ligatures: none;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }

.ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.12em;
}

/* ── Screen-only toolbar ── */
.cv-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: #faf5f0;
  border-bottom: 1px solid var(--cv-hair);
  font-size: 12px;
}

.cv-toolbar__link { color: var(--cv-muted); }
.cv-toolbar__link:hover { color: var(--cv-accent); }
.cv-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Phones keep the CV with the ready-made PDF: printing from a phone is the
   browser's own menu, and the button would push the toolbar off the screen.
   The query is the site's own phone test (PHONE in scroll.js). */
@media (max-width: 599.98px), (max-height: 499.98px) and (pointer: coarse) {
  #cvPrint { display: none; }
}

.cv-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--cv-hair);
  border-radius: 6px;
  background: transparent;
  color: var(--cv-muted);
  font-family: inherit;
  font-size: 12px;
  /* Set, not left to each element: the PDF link would inherit the body's,
     taller than the buttons' own */
  line-height: 1.2;
  cursor: pointer;
}
.cv-toolbar__btn:hover { border-color: var(--cv-accent); color: var(--cv-accent); }

/* Wide enough for their longest label, so the toolbar does not jump: the
   references button swaps "References" for "Lock", a third shorter, and
   "Imprimer" is half again as wide as "Print" — the toggle beside them would
   slide across on every unlock or language switch. In em, so the floor
   follows the font rather than a pixel value frozen at one size. */
#refsUnlock { justify-content: center; min-width: 9.2em; }
#cvPrint { justify-content: center; min-width: 6.4em; }
.cv-toolbar__btn--accent {
  border-color: transparent;
  background: var(--cv-accent);
  color: #fff;
}
.cv-toolbar__btn--accent:hover { background: var(--cv-rule); color: #fff; }
.cv-toolbar__sep { opacity: 0.4; margin: 0 1px; }
.cv-toolbar__btn [data-lang] { opacity: 0.45; }
.cv-toolbar__btn [data-lang].active { opacity: 1; font-weight: 700; }

/* ── The page ── */
.cv {
  max-width: 210mm;
  margin: 1.5rem auto;
  padding: 14mm 15mm;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
}

/* ── Header ── */
.cv-head { margin-bottom: 0.9rem; text-align: center; }

.cv-name {
  margin: 0;
  font-size: 27pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.cv-role {
  margin: 0.35rem 0 0;
  font-size: 13pt;
  font-weight: 700;
  color: var(--cv-accent);
}

.cv-tagline {
  margin: 0.25rem 0 0.55rem;
  font-size: 10pt;
  font-weight: 700;
}

/* Two lines, how to reach you then where to read more: each item an icon and
   its text, with a real " · " between items so an ATS reads every line in
   order. A grid was read column by column: pdfminer dropped half the
   contacts into the first job. LinkedIn and GitHub spell the profile out in
   full, and no item ever breaks across two lines: the line wraps between
   items. */
.cv-contact { margin: 0.2rem 0 0; font-size: 8.4pt; font-style: normal; }
.cv-contact p { margin: 0; }
.cv-contact p + p { margin-top: 0.2rem; }
.cv-contact__item { white-space: nowrap; }
.cv-contact__item .ico { margin-right: 0.3em; color: var(--cv-accent); }
/* The dot between the contacts of one line */
.cv-sep { color: var(--cv-accent); }

/* ── Sections ── */
/* Eight sections: every tenth of a rem here is worth ~3mm over the document,
   and the referenced version needs that margin to stay on two pages. */
.cv-section { margin-top: 0.55rem; }

.cv-h2 {
  margin: 0 0 0.35rem;
  padding-bottom: 0.08rem;
  border-bottom: 1.5pt solid var(--cv-rule);
  font-size: 13.5pt;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cv-accent);
}

/* ── Entries (jobs, degrees, projects) ── */
.cv-entry { padding-bottom: 0.4rem; }

.cv-entry + .cv-entry {
  margin-top: 0.4rem;
  border-top: 1px dashed var(--cv-hair);
  padding-top: 0.4rem;
}

.cv-entry__title {
  margin: 0;
  font-size: 11pt;
  font-weight: 400;
}

.cv-entry__org {
  margin: 0.08rem 0 0;
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--cv-accent);
}
/* The company's field after its name, as the site shows it, quieter. The
   dot sits in the same text node as its spaces, so the PDF keeps them. */
.cv-entry__sector { font-weight: 400; color: var(--cv-muted); }

/* The icons already set date, place and link apart: a moderate gap is enough */
.cv-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  margin: 0.15rem 0 0.25rem;
  font-size: 8.6pt;
  color: var(--cv-muted);
}
/* The icon and one inline run of text. Dates wrap their parts in
   .cv-meta__text: as separate flex items, the spaces around – and · were
   trimmed and replaced by the gap, leaving no space character in the PDF. */
.cv-meta { display: flex; align-items: center; gap: 0.35em; }

.cv-entry__desc { margin: 0 0 0.2rem; }

.cv-entry__list {
  margin: 0;
  padding-left: 1.05rem;
}
.cv-entry__list li { margin-bottom: 0.05rem; }

/* ── A company with several successive roles ── */
.cv-group { padding-bottom: 0.4rem; }
.cv-entry + .cv-group,
.cv-group + .cv-entry {
  margin-top: 0.4rem;
  border-top: 1px dashed var(--cv-hair);
  padding-top: 0.4rem;
}

/* An employer looks the same whether it carries one role or three: same size,
   weight and colour as the company line of a standalone entry. */
.cv-group__company {
  margin: 0;
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--cv-accent);
}
.cv-group__head .cv-entry__meta { margin-bottom: 0.3rem; }

/* Roles of one employer hang off a thin vertical line with a dot at each
   title, as LinkedIn draws them, half a line apart. Line and dots are
   borders on empty pseudo-elements: no character reaches the PDF's text,
   and borders print even with "background graphics" off. The dot's top
   puts its centre on the title's first line (11pt × 1.3 ÷ 2 ≈ 7.2pt). A
   hanging line in the page margin would keep the roles on the margin, but
   print clips anything drawn outside the page area. */
.cv-group .cv-entry { position: relative; padding: 0 0 0 1.05rem; }
/* Chrome paints positioned boxes after the rest, and writes the PDF's text
   in paint order: the roles above, alone positioned, were read after the
   next employer. Positioning every block of a section keeps document order. */
.cv-section > *, .cv-group > * { position: relative; }
.cv-group .cv-entry + .cv-entry { margin-top: 0.5rem; border-top: 0; padding-top: 0; }
.cv-group .cv-entry::before {
  content: '';
  position: absolute;
  top: 4.8pt;
  left: 0.1rem;
  width: 0;
  height: 0;
  border: 3.2px solid var(--cv-hair);
  border-radius: 50%;
}
/* From just below this role's dot to just above the next one */
.cv-group .cv-entry:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(9.6pt + 2.5px);
  bottom: calc(-0.5rem - 4.8pt + 2.5px);
  left: calc(0.1rem + 2.6px);
  border-left: 1.2px solid var(--cv-hair);
}

/* Role titles keep the shared .cv-entry__title treatment — only the client
   line differs, being a client and not an employer. */
.cv-group .cv-entry__org { font-weight: 400; color: var(--cv-muted); }

/* ── Skills ── */
/* One line per category, rendered by cv.js as a single comma-separated text
   run. Chips side by side leave no space character in the PDF, and a
   two-column grid is read row by row, one category running into the next. */
.cv-skills__row { margin: 0 0 0.12rem; }

.cv-skills__cat { font-weight: 700; }
/* A family's name: set apart from the row's bold category, in the accent */
.cv-skills__fam { font-weight: 500; color: var(--cv-accent); }
/* Drawn with a border, not a background: browsers drop backgrounds when
   printing unless "background graphics" is ticked, and the dot vanished. */
.cv-skills__cat::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.45em;
  border: 2px solid var(--cv-accent);
  border-radius: 50%;
  vertical-align: 0.2em;
}

/* ── Languages ── */
/* One per line, like the interests below: in two grid columns, pdfminer
   read the second language under the next section's heading. */
.cv-langs { display: grid; gap: 0.15rem; }

.cv-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin: 0;
}
.cv-lang__name { font-weight: 700; }
.cv-lang__level { color: var(--cv-muted); font-size: 9pt; }


/* ── Misc ── */
/* One item per line, title then description: in two columns the PDF reads
   both titles first, then both descriptions. */
.cv-misc { display: grid; gap: 0.15rem; }
.cv-misc__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}
.cv-misc__title { margin: 0; font-weight: 700; }
.cv-misc__desc  { margin: 0; color: var(--cv-muted); font-size: 9.5pt; }

.cv-refs { margin: 0; color: var(--cv-muted); }

/* Referees, once decrypted: one under the other (see renderRefs in cv.js) */
.cv-refs-list { display: grid; gap: 0.3rem; }
.cv-ref__head { margin: 0; }
.cv-ref__name { font-weight: 700; }
.cv-ref__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem 0.4em;
  margin: 0;
  color: var(--cv-muted);
  font-size: 8.8pt;
}
/* Space before the phone icon, none before its number */
.cv-ref__line .ico + .ico { margin-left: 0.5em; }
.cv-ref__line .ico { color: var(--cv-accent); }
.cv-ref__role { color: var(--cv-muted); font-size: 9pt; }

/* ── Inside the site's CV dialog ──
   The site draws the frame and the buttons; the page here is just the sheet.
   Screen only, so a print from the dialog matches /cv. */
@media screen {
  .is-embedded { overscroll-behavior: contain; }
  .is-embedded body { background: #fff; }
  .is-embedded .cv-toolbar { display: none; }
  .is-embedded .cv { margin: 0 auto; box-shadow: none; }
}

/* ── Small screens: the A4 frame stops helping ── */
@media (max-width: 560px) {
  .cv { margin: 0; padding: 20px 16px; box-shadow: none; }
  .cv-name { font-size: 24pt; }
}

/* ═══════════════════════════════════════════
   PRINT — this is the actual deliverable
═══════════════════════════════════════════ */
@page {
  size: A4;
  margin: 13mm 14mm;
}

@media print {
  body { background: #fff; font-size: 9.2pt; line-height: 1.3; }

  [data-screen-only] { display: none !important; }

  .cv { max-width: none; margin: 0; padding: 0; box-shadow: none; }

  /* A heading stranded at the foot of a page looks amateurish, so headings
     and entry titles never end a page. Job entries themselves DO split: at
     ~48mm each, forbidding it strands one whole entry per page break and
     that wasted whitespace is what pushed the PDF onto a third page.
     orphans/widows keep the split from leaving one lonely line behind. */
  .cv-h2 { break-after: avoid; }
  /* At line-height 1.1 the accent of an É rises above the heading's box,
     and a heading moved to the next page left that sliver of ink at the foot
     of the previous one. 1pt of padding keeps the accent inside the box. */
  .cv-h2 { padding-top: 1pt; }
  /* The skills open page 2 whole: split after a few rows, the list read as
     two halves. Page 1 holds the experience. */
  .cv-section--skills { break-before: page; }
  .cv-entry { break-inside: auto; orphans: 3; widows: 3; }
  .cv-group__head { break-after: avoid; }
  .cv-lang, .cv-misc__item, .cv-ref { break-inside: avoid; }
  .cv-entry__title, .cv-entry__org, .cv-entry__meta { break-after: avoid; }
  .cv-entry__list { orphans: 2; widows: 2; }
  .cv-head { break-after: avoid; }
}