/*
 * Acier template — an engineer's measured layout: identity + square portrait
 * over a 2px steel rule, then a body where every dated element hangs off ONE
 * fixed left-hand measurement column, so the dates align down the page edge
 * like the dimension column of a technical drawing.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid, no
 * transforms: floats / tables / block layout only, so the two renderers agree.
 *
 * THE MEASUREMENT COLUMN — the one geometry every section reuses, and the only
 * number in this file that must not drift:
 *   - dated rows: td.cv-gutter is a fixed 130px (right-aligned dates) and
 *     td.cv-row-main carries a 20px padding-left, so content starts at 150px.
 *     130px is what a numeric "09/2016 – 03/2020" range needs to stay on one
 *     line at 11.5px: when the date wraps, the row grows and pushes the entry's
 *     bullets visibly down the page. The gutter cell itself is UNPADDED on
 *     purpose: the renderers disagree on whether a td's CSS width includes its
 *     padding (mPDF border-box, the browser content-box), so a padded
 *     fixed-width cell drifts between them.
 *   - undated content (summary, key/value lists, bullets, details): a plain
 *     block with a 150px left inset, never a table with an empty first cell —
 *     many small block-level tables inflate mPDF's own pagination height enough
 *     to cost a whole extra page (confirmed on cobalt, 2026-07).
 *   - section labels: a block <h2> with margin-left:150px, so the 1px hairline
 *     under it starts in the content column and the date gutter stays empty.
 *
 * Palette: steel #334155 (job title, section labels, entry orgs, the header
 * rule, the level dots), hairline #94a3b8 (the rule under each section label
 * and every separator glyph), ink #0f172a (name, entry titles, key names),
 * body #1e293b, secondary #475569, dates #64748b. It is a fixed design
 * decision, not the user's settings.accentColor — a second accent would break
 * the drawing metaphor — so tpl_dots is called with a null accent and the dots
 * inherit .cv-dot-on.
 *
 * multipage:true — no fixed heights anywhere, no bottom padding on the page
 * (real trailing space opens a blank final page), every entry block is
 * page-break-inside:avoid, and inter-block spacing is an unconditional
 * margin-TOP: a margin-bottom on a repeated avoid block double-counts in
 * mPDF's pagination estimate, and mPDF drops `+` sibling rules entirely, so
 * neither the sibling-combinator nor the first-child-override form works here.
 *
 * Font stacks lead with a DejaVu face: mPDF substitutes Arial/Helvetica with
 * DejaVu *Condensed* (no bold face), so bold weights would silently export as
 * regular otherwise. Every bold below is the KEYWORD `bold`, never a numeric
 * 600/700 (mPDF ignores numeric weights).
 */

/* ---- page margins (multi-page) ---------------------------------------- *
 * PdfService gives mPDF margin_* = 0, so a PDF's only vertical margin is
 * this wrapper's own padding — and a wrapper's padding-top lands on page 1
 * alone, leaving every later page hard against the sheet edge.
 *
 * @page restores an identical margin on every page; `@page :first` zeroes
 * the top one so page 1 keeps using the wrapper padding it always had and
 * its output is unchanged. Left/right stay 0 — the wrapper's horizontal
 * padding already applies to every page. Inert in the browser (@page is
 * print-only), and builder.js reads these same values back out of CSSOM
 * so its page-count model matches what mPDF actually does. */
@page {
    margin: 44px 0 44px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page.resume-acier {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 44px 52px 0;        /* zero bottom: trailing space opens a blank final page */
    background: #ffffff;
    color: #1e293b;
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
}
/* mPDF does NOT inherit font-family/size into table cells — anything inside a
   <td> silently falls back to the serif document default. The header and every
   dated row are tables here, so the font must be declared at td level too.
   No-op in the browser. Rules that override size/color inside a specific cell
   are ordered after this. */
.resume-acier td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1e293b;
}

/* ---- header: identity | square portrait, over the 2px steel rule ----------
 * The rule is the two cells' shared border-bottom rather than a separate
 * element: a cell border paints one contiguous line across the full cell in
 * both renderers, while a content-less div is unreliable in mPDF. */
.resume-acier table.cv-head {
    width: 100%;
    border-collapse: collapse;
}
.resume-acier td.cv-head-id {
    vertical-align: top;
    padding: 0 24px 14px 0;      /* the portrait column's gutter lives here — see below */
    border-bottom: 2px solid #334155;
}
/* Exactly the portrait's 85px and UNPADDED, for the border-box/content-box
   reason spelled out at the top of this file; the gutter is the identity
   cell's own padding-right instead. */
.resume-acier td.cv-head-photo {
    width: 85px;
    padding: 0 0 14px;
    vertical-align: top;
    border-bottom: 2px solid #334155;
}
/* No width/height here: tpl_photo emits both inline (and the pdf-mode initials
   fallback is a GD PNG, which keeps its geometry inside a cell). */
.resume-acier .cv-photo,
.resume-acier .cv-photo-initials {
    display: block;
}
/* Identity lines are ROWS of a nested table, not margin-stacked blocks: mPDF
   drops block margins inside a cell, so the vertical rhythm is td padding. */
.resume-acier table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-acier table.cv-id td {
    padding: 0;
}
.resume-acier td.cv-id-title {
    padding-top: 6px;
}
.resume-acier td.cv-id-contact {
    padding-top: 9px;
}
.resume-acier .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #0f172a;
    letter-spacing: -0.2px;
    line-height: 1.15;
    margin: 0;
}
.resume-acier .cv-jobtitle {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #334155;
}
.resume-acier .cv-contact {
    font-size: 11px;
    color: #64748b;
    line-height: 1.55;
}
.resume-acier .cv-contact-sep {
    color: #94a3b8;
}

/* ---- sections ------------------------------------------------------------
 * The inter-section gap is the label's own unconditional margin-top, and the
 * gap under it is the following block's margin-top — nothing carries a
 * margin-bottom (see the multipage note at the top). */
.resume-acier .cv-section {
    margin: 0;
}
/* margin-left, not padding-left: the hairline must start at the content
   column, not run under the empty date gutter. */
.resume-acier .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #334155;
    border-bottom: 1px solid #94a3b8;
    padding-bottom: 4px;
    margin: 22px 0 0 150px;
    page-break-after: avoid;
}
/* page-break-after:avoid on the label alone is not reliable in mPDF — this
   wrapper (label + first entry) is what actually holds the pair together. */
.resume-acier .cv-section-head-group {
    page-break-inside: avoid;
}
/* pdf mode: mPDF doesn't reliably honor :last-child, so the server marks
   whichever section/item renders last with this plain class instead. Unscoped
   on purpose — it applies to whichever element carries it. Belt-and-braces
   here, since spacing is margin-top only. */
.resume-acier .is-last {
    margin-bottom: 0;
}
/* Ragged-right, never justify (mPDF spacing artifacts). */
.resume-acier .cv-summary {
    margin-top: 10px;
    padding-left: 150px;
    text-align: left;
    color: #334155;
}

/* ---- dated entries -------------------------------------------------------
 * Two-column "dates left / content right" via table (mPDF-safe, no float — a
 * float inside a page-break-inside:avoid block makes mPDF miscalculate the
 * block height and duplicate content). Spacing is an UNCONDITIONAL margin-top
 * on every entry, with no first-item override of any kind. */
.resume-acier .cv-item {
    position: relative;
    page-break-inside: avoid;
    margin-top: 12px;
}
.resume-acier .cv-row {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
/* No white-space:nowrap: a spelled-out French range ("septembre 2021 – juin
   2024") is wider than this column, and one nowrap cell shrinks the WHOLE
   layout table in mPDF (graphite, 2026-07). It wraps to a second
   right-aligned line instead, which still reads as one dimension entry. */
.resume-acier td.cv-gutter {
    width: 130px;
    padding: 0;
    text-align: right;
    vertical-align: top;
}
.resume-acier td.cv-row-main {
    padding: 0 0 0 20px;
    vertical-align: top;
    text-align: left;
}
.resume-acier .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #64748b;
}
.resume-acier .cv-item-loc {
    font-size: 11px;
    color: #94a3b8;
}
.resume-acier .cv-item-title {
    font-weight: bold;
    color: #0f172a;
}
.resume-acier .cv-item-org {
    color: #334155;
}
.resume-acier .cv-item-sep {
    color: #94a3b8;
}
/* edit mode only: a separator that must read as glued to the preceding
   editable text (the education comma, the key/value colon) can't be nested
   inside it — anything inside an editable becomes stored user data — so it
   sits on its own source line and pulls back over that newline's rendered
   space. The pdf branch emits the same separator with no whitespace at all and
   never uses this class. */
.resume-acier .cv-sep-tight {
    margin-left: -4px;
}
.resume-acier .cv-item-field {
    color: #475569;
}
.resume-acier .cv-item-details {
    margin-top: 3px;
    padding-left: 150px;
    font-size: 12.5px;
    color: #475569;
}

/* Bullets: native <ul>/<li> inset to the measurement column, with a real ▪
   marker span and a hanging indent (padding-left + negative text-indent).
   Native list items let mPDF estimate the enclosing avoid block's height
   accurately, and the marker is real HTML text — a CSS content: marker renders
   nothing at all in mPDF. */
.resume-acier .cv-bullets {
    margin: 6px 0 0;
    padding-left: 150px;
    list-style: none;
}
.resume-acier .cv-bullets li {
    position: relative;
    padding-left: 15px;
    text-indent: -15px;
    margin-bottom: 3px;
    font-size: 13px;
    color: #1e293b;
}
.resume-acier .cv-bk {
    color: #64748b;
    margin-right: 6px;
}

/* ---- key/value lines (skills "domain: tools", languages "name: level") ----
 * Plain blocks in the content column, never a table per line and never chips:
 * repeated small tables inflate mPDF's pagination height, consecutive
 * inline-blocks merge into one box, and repeated floats stack instead of
 * packing into rows. The colon is emitted glued to the key in the markup. */
.resume-acier .cv-kv-list {
    margin-top: 10px;
    padding-left: 150px;
}
/* pdf mode splits the list in two — label + first line inside the
   page-break-inside:avoid head group, the remainder free to break — so the
   continuation must not repeat the list's own top margin. */
.resume-acier .cv-kv-list.cv-kv-list--cont {
    margin-top: 0;
}
.resume-acier .cv-kv {
    position: relative;
    margin-bottom: 3px;
    font-size: 13px;
}
.resume-acier .cv-kv-key {
    font-weight: bold;
    color: #0f172a;
}
.resume-acier .cv-kv-sep {
    color: #94a3b8;
}
.resume-acier .cv-kv-val {
    color: #475569;
}
/* The level slot holds EITHER dot glyphs or free text (tpl_dots passes text
   through untouched), so the tracking that spaces the dots apart lives on the
   dots themselves — otherwise a written level like "C1 - Autonome" exports as
   letterspaced small type. */
.resume-acier .cv-level {
    font-size: 13px;
    color: #475569;
}
.resume-acier .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-acier .cv-dot-on {
    color: #334155;
}
.resume-acier .cv-dot-off {
    color: #e2e8f0;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never
 * emitted in pdf mode, so none of this reaches mPDF).
 * Every [contenteditable]/[data-ph] rule stays at ONE level below the page
 * class: mPDF can't parse those chunks and applies the declaration to a
 * two-or-more-level prefix instead, repainting whatever pdf-mode element that
 * prefix names (confirmed on graphite, 2026-07).
 * ===================================================================== */

.resume-acier [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b6c1cf;
    font-style: italic;
    pointer-events: none;
}
.resume-acier [contenteditable] {
    outline: none;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-acier [contenteditable]:hover {
    box-shadow: 0 0 0 1px #cbd5e1;
}
.resume-acier [contenteditable]:focus {
    box-shadow: 0 0 0 2px #334155;
    background: #f1f5f9;
}
/* Edit-mode contact fields carry their own class rather than being selected
   through [contenteditable] (see the note above), and their spacing replaces
   the middots the pdf branch joins the filled fields with — an always-present
   empty slot must not print a separator beside it. */
.resume-acier .cv-contact-f {
    display: inline-block;
    min-width: 40px;
    margin-right: 12px;
}

.resume-acier .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-acier .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-acier .cv-item:hover > .edit-controls,
.resume-acier .cv-kv:hover > .edit-controls,
.resume-acier .cv-bullets li:hover > .edit-controls,
.resume-acier .edit-controls:hover {
    opacity: 1;
}
.resume-acier .edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 3px;
    cursor: pointer;
}
.resume-acier .edit-controls button:hover {
    background: #334155;
    border-color: #334155;
    color: #ffffff;
}

.resume-acier .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    margin-left: 150px;
    padding: 4px 10px;
    border: 1px dashed #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 4px;
    cursor: pointer;
}
.resume-acier .cv-add:hover {
    background: #f1f5f9;
    border-color: #334155;
}
.resume-acier .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

.resume-acier .cv-current {
    display: block;
    font-family: inherit;
    font-size: 11px;
    font-weight: normal;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    cursor: pointer;
}
.resume-acier .cv-current input {
    vertical-align: middle;
}

.resume-acier .cv-dot-btn,
.resume-acier .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-acier .cv-dot-btn.cv-dot-on {
    color: #334155;
}
.resume-acier .cv-dot-btn.cv-dot-off {
    color: #e2e8f0;
}
.resume-acier .cv-level-toggle {
    font-size: 9px;
    color: #94a3b8;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-acier .cv-kv:hover .cv-level-toggle {
    opacity: 1;
}